Question

我正在使用图片作为我的某个页面的背景。我想在图像上添加一个不透明度的backgroundColor。我不确定如何使用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

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

React Native backgroundColor覆盖图像

3 个答案: