リアクションネイティブオーバーレイは透明です

Question

私は何度も試してみましたが、まだ解決策が見つかりません。

画面にはたくさんのコンポーネントがあります。私はヘッダーとコンテンツビューのコンポーネントを分けた。

コンテンツコンポーネントには、マップコンポーネント（画像）があり、その他のコンポーネント（人物コンポーネント（画像）など）があります。

マップコンポーネントでは、フルスクリーンで透明なオーバーレイを作成したいが、マップコンポーネントとオーバーレイするだけです。反応するネイティブでは、Z-インデックスはありません。どうしたらいいですか？ https://rnplay.org/apps/wHCi_A

Answer 1

移動ルートビューにビューにオーバーレイ表示と最後の子として追加してください：フルスクリーンをオーバーレイすることはできません。この例のように

<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> 

。位置を絶対値に設定します。このようなもの

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>