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

以下是我如何在网页上实现此目的:How to make in CSS an overlay over an image?

Answer 1

您可以做的一件很酷的事情是在它上面放置一个绝对定位的 View 。

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

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

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