React Native backgroundColor覆盖图像

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,
}

以下是我在网页上实现这一目标的方法:如何在CSS中对图像进行叠加？

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)',
  }
})