Question

在CSS中，filter属性可用于配置图像的亮度，如

// using CSS
filter: brightness(50%);

如何在React Native Images中获得相同的结果？

Answer 1

我在修补它之后想出了这个。要获得以下结果：

JSX：

<Image style={styles.universityImage} source={require('./csun.jpg')}>
    <View style={styles.innerFrame}>
        <Text style={styles.universityName}>California State University, Northridge</Text>
        <Text style={styles.universityMotto}>"CSUN Shine"</Text>
    </View>
</Image>

样式表：

const styles = StyleSheet.create({ 
// View tag styling
innerFrame: {
    flex: 1, 
    alignItems: 'center', 
    justifyContent: 'center',
    backgroundColor: 'rgba(0, 0, 0, .5)', 
},
// Image tag styling
universityImage: {
    width: 300,
    height: 250,
    borderRadius: 5,
},
universityName: {
    color: '#fff',
    opacity: .9,
    fontSize: 20,
    textAlign: 'center',
    fontWeight: '500',
    marginVertical: 15,
    backgroundColor: 'transparent'
},
universityMotto: {
    color: '#fff',
    opacity: .9,
    textAlign: 'center',
    backgroundColor: 'transparent'
}
})

在<View></View>中嵌套<Image></Image>标记并提供视图标记flex: 1，以便它占用父标记的整个宽度和高度，即{{1}在这种情况下标记。然后在<Image></Image>标记中添加backgroundColor: rbga(0, 0, 0, .5)，使其具有不透明的外观。那就是它！希望这可以帮助别人！

P.S。在嵌套的<View></View>标记内，我提供了<View></View>，以便文字完全位于中间

Answer 2

React native的CSS支持有限，但请查看此repo：https://github.com/stoffern/gl-react-instagramfilters这可能有助于您继续使用。

Answer 3

This @Arvin Flores 的回答是很好的答案，但现在已经过时了，因为我们不能在图像中嵌套元素。但是我们可以通过使用 <ImageBackground> from react-native 来实现，它的工作方式与 image 相同，我们也可以在其中嵌套元素。因此，要使 this 答案起作用，只需将 Image 替换为 BackgroundImage，并且不要忘记从 react-native 导入它。

如何在React Native中配置图像的亮度

3 个答案: