如何在 React Native 中为图像配置亮度答案

【问题标题】：How to configure brightness for images in React Native如何在 React Native 中为图像配置亮度
【发布时间】：2017-01-22 07:27:51
【问题描述】：

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

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

如何在 React Native Images 中实现相同的结果？

【问题讨论】：

标签： filter react-native brightness

【解决方案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'
}
})

在<Image></Image> 中嵌套一个<View></View> 标签并赋予视图标签flex: 1，这样它就占据了父标签的整个宽度和高度，在本例中为<Image></Image> 标签。然后将backgroundColor: rbga(0, 0, 0, .5) 添加到<View></View> 标签，使其具有不透明的外观。就是这样！希望这可以帮助某人！

附：在嵌套的<View></View> 标签内，我给了justifyContent: 'center', alignItems: 'center'，这样文本就完美地位于中间

【讨论】：

这对我不起作用——收到一条错误消息，提示您不能将子组件（即视图）放入 RN 中的图像组件内。

【解决方案2】：

React native 的 CSS 支持是有限的，但是看看这个 repo：https://github.com/stoffern/gl-react-instagramfilters 这可能会帮助你继续。

【讨论】：

【解决方案3】：

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

【讨论】：