React Native Overlay Transparent

时间:2016-06-14 17:03:24

标签: reactjs 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

1 个答案:

答案 0 :(得分:9)

将叠加视图移动到根视图的视图,并确保将其添加为最后一个子视图。将位置设置为绝对值。像这样的东西

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>