Wie wird ein Bild über ein anderes Bild in Native gesetzt?

Question

Ich habe ein Bild als Wurzelknoten platziert, um es zu einem Hintergrund für meine Ansicht zu machen. Aber es scheint, dass alle anderen Bilder unsichtbar werden ... Gibt es eine Möglichkeit, ein Bild über den Hintergrund mit eingebauten Komponenten ohne Plugins zu platzieren?
Im folgenden Codebeispiel landing-background wird als Hintergrund verwendet, mein logo Bild ist sichtbar, aber nur wenn Hintergrund entfernt wird.
Text wird ohne Bedenken auf den Hintergrund zeigt ...

<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

Anstatt Ihre Inhalte in den <Image> Einwickeln, ich glaube, Sie wäre besser dran, dass ly positioniertes Element in einem absolute Einwickeln und diese Strecke mit um den Bildschirm abzudecken.

<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' 
    } 
});