javascript – React Native backgroundColor覆盖图像

我使用图像作为我的一个页面的背景.我想在图像上添加一个不透明度的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?

解决方法

你可以做的很酷的事情是在它上面放一个绝对定位的视图.

<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.5)'
   }
 })

absoluteFillObject与

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

如果您希望能够点击覆盖图,只需将视图上的pointerEvents prop设置为none即可

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