我已多次尝试,剧照无法找到解决方案。
在屏幕上,我有很多组件。我在标题和内容视图中分隔了组件。
在内容组件中,有地图组件(图像),还有其他组件,如人物组件(图像)。
在地图组件中,我想要一个全屏透明覆盖,但它只覆盖地图组件。在本机反应中,没有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
答案 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>