Come posizionare un'immagine sopra l'altra immagine in React Native?

Question

Ho posizionato un'immagine come nodo radice per renderlo uno sfondo per la mia vista. Ma sembra che tutte le altre immagini diventino invisibili ... È un modo per posizionare un'immagine in cima allo sfondo usando componenti built-in, senza plugin?
Nell'esempio di codice seguente, landing-background viene utilizzato come sfondo, l'immagine logo è visibile, ma solo se lo sfondo viene rimosso.
Text sta mostrando in cima al fondo, senza alcun problema ...

<View style={styles.container}> 
      <Image source = {require('./img/landing-background.jpg')} 
       resizeMode = 'cover' style = {styles.backdrop}> 
       <View style = {styles.overlay}> 
       <Text style = {styles.headline}>It should appear in front of the Background Image</Text> 
    <Image style = {styles.logo} source = {require('./img/logo.png')} /> 
       </View> 

       </Image> 
    </View> 

var styles = StyleSheet.create({ 
     container: { 
     flex: 1, 
     alignItems: 'center', 
     }, 
     overlay: { 
     opacity: 0.5, 
     backgroundColor: '#000000' 
     }, 
     logo: { 
     backgroundColor: 'rgba(0,0,0,0)', 
     width: 160, 
     height: 52 
     }, 
     backdrop: { 
     flex:1, 
     flexDirection: 'column' 
     }, 
     headline: { 
     fontSize: 18, 
     textAlign: 'center', 
     backgroundColor: 'rgba(0,0,0,0)', 
     color: 'white' 
     } 
    }); 

Answer 1

Piuttosto che avvolgendo il contenuto del <Image>, penso che sarebbe meglio avvolgere che in un elemento posizionato LY absolute e avere quel tratto per coprire lo schermo.

<View style={styles.container}> 
    <View style = {styles.backgroundContainer}> 
    <Image source = {require('./img/landing-background.jpg')} resizeMode = 'cover' style = {styles.backdrop} /> 
    </View> 
    <View style = {styles.overlay}> 
    <Text style = {styles.headline}>It should appear in front of the Background Image</Text> 
    <Image style = {styles.logo} source = {require('./img/logo.png')} /> 
    </View> 
</View> 

var styles = StyleSheet.create({ 
    backgroundContainer: { 
    position: 'absolute', 
    top: 0, 
    bottom: 0, 
    left: 0, 
    right: 0, 
    }, 
    container: { 
    flex: 1, 
    alignItems: 'center', 
    }, 
    overlay: { 
    opacity: 0.5, 
    backgroundColor: '#000000' 
    }, 
    logo: { 
    backgroundColor: 'rgba(0,0,0,0)', 
    width: 160, 
    height: 52 
    }, 
    backdrop: { 
    flex:1, 
    flexDirection: 'column' 
    }, 
    headline: { 
    fontSize: 18, 
    textAlign: 'center', 
    backgroundColor: 'black', 
    color: 'white' 
    } 
});