反应原生背景颜色覆盖在图像上

Question

我正在使用一张图片作为我的一个页面的背景。我想在图像上添加一个不透明度的背景颜色。我不确定如何使用 React Native 实现这一点。

render() {
  return (
    <Image source={require('./assets/climbing_mountain.jpeg')} style={styles.container}>
      <Text>Hello</Text>
    </Image>
  )
}

const styles = StyleSheet.create({
  container: {
  flex: 1,
  width: null,
  height: null,
}

这是我在网页上实现此目的的方法：How to make in CSS an overlay over an image?

Answer 1

您可以做的一件很酷的事情是在其上放置一个绝对定位的视图。

<View>
  <Image source={require('./assets/climbing_mountain.jpeg')} style=  {StyleSheet.absoluteFillObject}} resizeMode='cover'>
    <Text>Hello</Text>
  </Image>
  <View style={styles.overlay} />
</View>

...
const styles = StyleSheet.create({
   overlay: {
     ...StyleSheet.absoluteFillObject,
     backgroundColor: 'rgba(0,0,0,0.5)'
   }
 })

absoluteFillObject与

相同

{
 position: 'absolute',
 top: 0,
 left: 0,
 right: 0,
 bottom: 0
}

如果您希望能够点击覆盖，只需将视图上的 pointerEvents 属性设置为 none

文档：https://facebook.github.io/react-native/docs/stylesheet.html#absolutefillobject

Answer 2

感谢@Kevin Velasco，我得以完成这项工作。

render() {
  return (
    <View style={styles.container}>
      <Image source={require('./assets/climbing_mountain.jpeg')} style={styles.imageContainer}>
      </Image>
      <View style={styles.overlay} />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: null,
    height: null,
  },
  imageContainer: {
    flex: 1,
    width: null,
    height: null,
  },
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(69,85,117,0.7)',
  }
})

Answer 3

这就是我如何让它为我工作的方式

const visaCard = require('../Images/card_visa.png');
  const [iscardBloqued, setIsCardBolqued] = useState(false);
  const [hideInfos, setHideInfos] = useState(true);

这是组件的外观

  <View style={styles.imageContainer}>
      <ImageBackground
        source={visaCard}
        imageStyle={{ borderRadius: wp(3) }}
        style={styles.imageStyle}
        resizeMode="cover"
      >
        {hideInfos && (
          <TouchableOpacity activeOpacity={0.8} style={styles.cardWhiteButton}>
            <FText style={styles.whiteButtonText}>Afficher les infos</FText>
          </TouchableOpacity>
        )}

        {iscardBloqued && (
          <View style={styles.overlay}>
            <TouchableOpacity
              activeOpacity={0.7}
              style={{ alignItems: 'center' }}
            >
              <Lock />
              <FText style={styles.overlayText}>Carte bloqueé</FText>
            </TouchableOpacity>
          </View>
        )}
      </ImageBackground>
    </View>
  

她是我的样式页面：“我更喜欢将它与我的组件分开”

export default StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
  },

  imageContainer: {
    alignSelf: 'center',
    marginTop: hp(3),
  },
  imageStyle: {
    height: hp(25),
    width: wp(85),
  },
  cardWhiteButton: {
    marginHorizontal: wp(8),
    backgroundColor: 'white',
    marginTop: hp(17),
    height: hp(5),
    width: wp(32),
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: wp(5),
  },
  whiteButtonText: {
    fontSize: hp(1.4),
    color: 'white',
    fontFamily: 'Roboto',
  },
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0,0,0,0.89)',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: wp(3),
  },
  overlayText: {
    color: 'white',
    fontSize: hp(1.6),
    fontFamily: 'Roboto',
    marginTop: hp(2),
  },
});

Answer 4

在这里我用来解决我的项目，谢谢大家：

<View>
<View
style = {{
    //make overlay
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
   //change this color to the other one which you want
    backgroundColor: 'green',
    
}}
/>
<Image 
source = {{ uri: Your-Image-Here }}
style = {{ height: 150, width: 200, resizeMode: 'cover', borderBottomLeftRadius: 20, borderTopLeftRadius: 20 }}
/>
</View>

Answer 5

在 React Native 图像背景上进行叠加：如果您只想在 React Native 中叠加背景图像而不影响 标签内的其他元素，请执行以下操作：

//Fetching the background image from online, you can use any image source of your choice.

const GoProImageBackGd = { uri: "https://images.pexels.com/photos/2462402/pexels-photo-2462402.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" };

// Setting the background image for the view:

 <View style={styles.GoProBox}>
            <ImageBackground source={GoProImageBackGd} resizeMode='cover' style={styles.goProBgImage}>
            <View style={styles.overlayView}/>
            <Text style={styles.goProText}> Want to join the hot section? Go hot with Pro!</Text>
            <GoProButton />
            </ImageBackground>

//Stylesheet

const styles = StyleSheet.create({
GoProBox: {
        width: '95%',
        height: 200,
        margin: 5,
        backgroundColor: '#00cc00',
        borderRadius: 10,
        alignSelf: 'center',
        overflow: 'hidden'

    },
goProBgImage: {
        width: '100%', height: '100%',


    },

    goProText: {
        textAlign: 'center',
        fontSize: 20,
        marginTop: 10,
        fontWeight: 'bold',
        padding: 10,
        color: 'white'

    },
GoProButton: {
        height: 60,
        width: 200,
        backgroundColor: 'red',
        borderRadius: 15,
        alignSelf: 'center',
        justifyContent: 'center',
        top: 50
    },
overlayView: {
        height: "100%",
        width: "100%",
        position: 'absolute',
        backgroundColor: 'rgba(0, 204, 0, 0.5)',

    }

})