反應本地覆蓋透明

我已經嘗試了很多次，劇照找不到解決方案。反應本地覆蓋透明

在屏幕上，我有這麼多的組件。我在標題和內容視圖組件中分離。

在內容組件中，有地圖組件（圖像），並且還有其他組件（圖像）。

在地圖組件中，我希望有一個全屏的透明覆蓋圖，但它只覆蓋地圖組件。在原生反應中，沒有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

反應本地覆蓋透明

回答

相關問題