react-native - 如何使 标签的图像变暗(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>

从这里环顾四周，我尝试了以下解决方案:

试图将 text 元素包裹在 imagebackground 标签内
具有“backgroundColor”样式属性且值为“rgba(255,0,0,0.5)”的 View 元素(也尝试了不同的值)，

尝试将此 backgroundColor 属性添加到容器本身的样式中，即 TouchableOpacity 元素

尝试使用“elevation”属性而不是 backgroundColor 来解决上述两种解决方案(我在 Android 中工作)。

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

谢谢!

Answer 1

如果任何人仍然对 ImageBackground 组件有问题，这就是我解决它的方法，基本上我在图像背景中设置了一个 View ，该 View 具有使图像变暗的 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)'
      },
});