反应本地覆盖透明

我已经尝试了很多次，剧照找不到解决方案。反应本地覆盖透明

在屏幕上，我有这么多的组件。我在标题和内容视图组件中分离。

在内容组件中，有地图组件（图像），并且还有其他组件（图像）。

在地图组件中，我希望有一个全屏的透明覆盖图，但它只覆盖地图组件。在原生反应中，没有z-索引。我该怎么做？

<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

来源

2016-06-14 Cho Keung Yuen

你想添加一个更多的视图顶部的另一个视图？如果是这种情况，您可以使用react-native modal.' '以获取更多信息，请查看[react-native modal]（https://facebook.github.io/react- native/docs/modal.html） –

像这样的例子，它不能覆盖整个屏幕：https://rnplay.org/apps/wHCi_A –

如果我使用react-native模式，当modalVisible是如何保持项目假 –

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

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>

来源

2016-06-14 18:24:08

反应本地覆盖透明

回答

相关问题