React Native Overlay Transparent

Question

Я пробовал много раз, кадры не могут найти решение.

На экране у меня так много компонентов. Я разделял компоненты заголовка и содержимого.

В компонентах контента есть компонент карты (изображение), и есть другие компоненты, такие как компонент (изображение) для людей.

В компоненте карты я хочу иметь прозрачное наложение с полным экраном, но оно накладывается только на компонент карты. В реактивной среде нет 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

Answer 1

Переместить оверлей вид на вид на корневой 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>