如何使<ImageBackground>标签的图像变暗(React Native)

Question

我正在尝试创建一个带有文本的图像，为了清晰地看到文本，我需要使图像更暗。另外(不确定这是否重要)我需要背景图像是可触摸的。这个问题在这里被问了好几次，我看到了一些答案，但没有一个对我有效，所以我想知道我是否错过了更重要的东西。

我的代码如下：

<View style={postStyles.container}>
<TouchableOpacity onPress={() => 
this.props.navigation.navigate('AnotherWindow')}>
<ImageBackground source={require('../../assets/images/my_img.jpg')} 
style={{width: '100%', height: 150}}>
<Text style={postStyles.title} numberOfLines={2}>
My text
</Text>
</ImageBackground></TouchableOpacity>

环顾四周，我尝试了以下解决方案：

• 尝试将文本元素包装在具有"backgroundColor"样式属性、值为"rgba(255,0,0,0.5)"的视图元素(也尝试了不同的值)
• 尝试将此backgroundColor属性添加到容器本身和TouchableOpacity元素的样式中
• 尝试使用"elevation"属性而不是backgroundColor(我在Android中工作)来实现上述两种解决方案

从某种意义上说，上述解决方案都不起作用，背景图像根本没有改变，所以我想知道我是否错过了更关键的东西。

谢谢！

Answer 1

如果有人仍然对ImageBackground组件有问题，我就是这样解决的，基本上我在图像背景内设置了一个视图，该视图具有使图像变暗的backgroundColor。

<ImageBackground
source={Images.background}
style={styles.imageBackground}
>
<View style={styles.innerContainer}>
{content}
</View>
</ImageBackground>
const styles = StyleSheet.create({
imageBackground: {
height: '100%',
width: '100%'
},
innerContainer: {
flex: 1,
backgroundColor: 'rgba(0,0,0, 0.60)'
},
});

Answer 2

您只需将tintColor添加到ImageBackground-imageStyle即可。别紧张！

<TouchableOpacity onPress={() => this.props.navigation.navigate('AnotherWindow')}>
<ImageBackground source={require('../../assets/images/my_img.jpg')} 
style={{width: '100%', height: 150}}
imageStyle={{tintColor: 'rgba(255,0,0,0.5)'}}>
<Text style={postStyles.title} numberOfLines={2}>
My text
</Text>
</ImageBackground>
</TouchableOpacity>

Answer 3

如果你想让图像更暗，你需要Image组件并使用tintColor道具，比如：

<Image source={require('./your_image.png')} style={{ tintColor: 'cyan' }}>

这个tintColor道具只适用于Image组件，而不适用于ImageBackground，而且如果你想在Image组件上添加文本，你需要用position: 'absolute'或'relative'定位该文本

<View style={postStyles.container}>
<TouchableOpacity
onPress={() => his.props.navigation.navigate('AnotherWindow')}>}
>
<Image
source={require('./my_image.png')}
resizeMode="contain"
style={{ width: '100%', height: 150, tintColor: 'cyan' }}
/>
<Text style={postStyles.title} numberOfLines={2}>
My text
</Text>
</TouchableOpacity>
</View>

此外，如果你实现这种方法，你需要计算每个设备的屏幕尺寸，那么你需要从react native中检查这个其他组件：https://facebook.github.io/react-native/docs/dimensions

请让我知道这是否有效：D