filter - 如何在 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> 内的标签并给出 View 标签 flex: 1这样它就占据了父标签的整个宽度和高度，即 <Image></Image>在这种情况下标记。然后添加一个backgroundColor: rbga(0, 0, 0, .5)到 <View></View>标签赋予它不透明的外观。就是这样!希望这可以帮助别人!

附言在嵌套 <View></View> 内我给的标签justifyContent: 'center', alignItems: 'center'这样文字就完美地在中间