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

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>