Question

我已多次尝试，剧照无法找到解决方案。

在屏幕上，我有很多组件。我在标题和内容视图中分隔了组件。

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

在地图组件中，我想要一个全屏透明覆盖，但它只覆盖地图组件。在本机反应中，没有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>

React Native Overlay Transparent

1 个答案: