React native 如何制作a的图像<；图像背景>；标记颜色较深（本机反应）

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

我的代码如下：

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

this.props.navigation.navigate（'AnotherWindow'）}>
我的文字

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

• 尝试将imagebackground标记中的文本元素包装到 具有“backgroundColor”样式属性且值为“rgba（255,0,0,0.5）”的视图元素（也尝试了不同的值）
• 尝试将此backgroundColor属性添加到容器本身的样式，即TouchableOpacity元素
• 尝试使用“elevation”属性而不是backgroundColor（我在Android中工作）来创建上述两个解决方案

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

---

谢谢

如果要使图像更暗，需要使用

图像

组件并使用tintColor道具，如：

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

此外，如果您实施此方法，您需要计算每个设备的屏幕尺寸，那么您需要从react native检查其他组件：

---

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

如果任何人仍然对ImageBackground组件有问题，这就是我解决问题的方法，基本上我在图像背景中设置了一个视图，背景颜色使图像变暗

 <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)'
      },
});

{content}
const styles=StyleSheet.create({
图像背景：{
高度：“100%”，
宽度：“100%”
},
内部容器：{
弹性：1，
背景颜色：“rgba（0,0,0,0.60）”
},
});

您只需在ImageBackground imageStyle中添加tintColor即可。轻松点

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

this.props.navigation.navigate（'AnotherWindow'）}>
我的文字

如果您想更改图像的背景色，我希望图像采用

.png

格式，并将图像组件嵌套到

视图中

组件中，如：````````the

tintColor

prop更改图像本身的颜色嘿，Yasser，谢谢您的回答！：）这样，我终于可以真正影响形象了。tintColor的问题是，实际上只是给整个图像上色，而不是像我希望的那样让它变暗一点。第二个解决方案是将图像标签合并到具有背景颜色属性的视图标签中，可惜这个方案不起作用（根本不影响图像）。我不知道这是否是因为我的图片是jpg而不是png，但无论如何我也需要支持jpg图像。编辑：哈！我试着处理图像的不透明度，它确实起了作用。非常感谢：）tintColor道具也适用于ImageBackground。它应该只应用于imageStyle而不是style。这是一个更好的答案，因为它保留了

组件。

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