如何使 <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>

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

• 试图将 text 元素包装在 imagebackground 标签内的 View 元素中，该元素的样式属性为“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组件 not 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 /文档/尺寸

请告诉我这是否有效：D