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>

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

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

从某种意义上说，背景图像完全没有改变，上述所有解决方案均无用，所以我想知道是否遗漏了更重要的内容。

谢谢！

Answer 1

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

如果要使图像更暗，则需要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

Answer 3

如果仍然有人对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,
        blackTransparent: 'rgba(0,0,0, 0.60)'
      },
});

如何使<imagebackground>标签的图像变暗（React Native）

3 个答案: