Как разместить изображение поверх другого изображения в книге React Native?

Question

Я разместил изображение как корневой узел, чтобы сделать его фоном для моего представления. Но похоже, что все остальные изображения становятся невидимыми ... Можно ли разместить изображение поверх фона с помощью встроенных компонентов без каких-либо плагинов?
В следующем примере кода landing-background используется в качестве фона, мое изображение logo видно, но только если фон удален.
Text показывает на верхней части фона без каких-либо проблем ...

<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

Вместо упаковки вашего контента в <Image>, я думаю, вы бы лучше оборачивать, что в absolute LY позиционируемого элемента и имеющий, что вытягивание для покрытия экрана.

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