React Native 透明叠加层

Question

我尝试了很多次，仍然找不到解决方法。

在一个屏幕上，我有很多组件。我将它们分为头部和内容视图组件。

在内容组件中，有地图组件（图像），还有其他组件，例如人物组件（图像）。

在地图组件中，我想要一个透明的全屏叠加层，但它只会覆盖地图组件。在React Native中，没有z-index。我该怎么做？

<View>
  <View style={styles.header}>
    .....
  </View>
  <View style={styles.content}>
    <Image style={styles.map}>
       <View style={styles.overlay}>
         <Image style={styles.people} />
         <Image style={styles.destination} />
       </View>
    </Image>
  </View>
</View>

就像这个例子一样，无法覆盖整个屏幕： https://rnplay.org/apps/wHCi_A

- kenny

---

你想在另一个视图的顶部添加一个视图吗？如果是这样，你可以使用React Native Modal。 <Modal transparent=true, visible=true></Modal> 了解更多信息，请查看React Native Modal。 - Ashok R

例如此示例，它无法覆盖整个屏幕：https://rnplay.org/apps/wHCi_A - kenny

如果我使用React-Native的Modal组件，当modalVisible状态为false时，如何保留项目？ - kenny

你能否查看一下React Native Modal？如果你需要类似的效果，可以将transparent属性设置为true。如果可能的话，请添加图片以便我更清楚地了解你想要实现的效果。 - Ashok R

Answer 1

将覆盖视图移动到根视图并确保将其添加为最后一个子项。 将位置设置为绝对位置。类似于这样的东西。

const styles= StyleSheet.create({
  overlay:{
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: 'rgba(0,0,0,0.2)'
}); 

<View>
  <View style={styles.header}>
    .....
  </View>
  <View style={styles.content}>
    <Image style={styles.map}>
    </Image>
  </View>
  <View style={styles.overlay}>
     <Image style={styles.people} />
     <Image style={styles.destination} />
  </View>
</View>

- agenthunt

---

这应该在文档中！https://react-native-training.github.io/react-native-elements/docs/overlay.html - Leonardo G.