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

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，使其占据父标签的整个宽度和高度，<Image></Image>在这种情况下是标签。然后backgroundColor: rbga(0, 0, 0, .5)在<View></View>标签中添加一个，使其具有不透明的外观。就是这样！希望这可以帮助别人！

PS 在<View></View>我给出的嵌套标签中justifyContent: 'center', alignItems: 'center'，使文本完全位于中间