如何使 <ImageBackground> 标签的图像更暗（React Native）答案

【问题标题】：How to make an image of a <ImageBackground> tag darker (React Native)如何使 <ImageBackground> 标签的图像更暗（React Native）
【发布时间】：2019-01-22 21:42:49
【问题描述】：

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

我的代码如下：

<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>

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

试图将 imagebackground 标签内的文本元素包裹在一个样式属性为“backgroundColor”且值为“rgba(255,0,0,0.5)”的视图元素（也尝试了不同的值），
尝试将此 backgroundColor 属性添加到容器本身的样式中，即 TouchableOpacity 元素
尝试使用“elevation”属性而不是 backgroundColor 的上述两种解决方案（我在 Android 中工作）。

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

谢谢！

【问题讨论】：

标签： react-native

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

【讨论】：

这是一个更好的答案，因为它保留了<ImageBackground/> 组件。

【解决方案2】：

如果你想让图像变暗，你需要 Image 组件并使用 tintColor 属性，例如：

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

这个tintColor 属性仅适用于Image 组件而不是ImageBackground，如果您想在Image 组件上添加文本，您需要使用position: 'absolute' 或@987654330 定位该文本@

 <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

【讨论】：

如果你想改变图像的背景颜色，我希望图像采用.png 格式并将图像组件嵌套到View 组件中，例如：``` ``` tintColor 属性改变图像本身的颜色 facebook.github.io/react-native/docs/image
嘿亚瑟，谢谢你的回答！ :) 这样我终于可以真正影响形象了。 tintColor 的问题在于，它确实只是为整个图像着色，而不是像我希望的那样让它变暗一点。遗憾的是，将图像标签合并到具有背景颜色属性的视图标签中的第二种解决方案不起作用（根本不影响图像）我不知道是不是因为我的图片是 jpg 而不是 png，但无论如何我也需要支持 jpg 图像。
编辑：哈！我尝试使用图像的不透明度，它确实有效。非常感谢:)
tintColor 道具也适用于 ImageBackground。它只应该应用于 imageStyle 而不是样式。

【解决方案3】：

您只需将 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>

【讨论】：