Ios 如何在React Native中将图像置于其他图像之上？

我放置了一个图像作为根节点，以使其成为视图的背景。但似乎所有其他的图像都变得看不见了。。。 是否可以使用内置组件将图像放置在背景之上，而不使用任何插件
在以下代码示例中，

着陆背景

用作背景，我的

徽标

图像可见，但仅当背景被移除时可见。

文本

显示在背景顶部，没有任何问题

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

它应该出现在背景图像的前面
var styles=StyleSheet.create({
容器：{
弹性：1，
对齐项目：“居中”，
},
覆盖：{
不透明度：0.5，
背景颜色：'#000000'
},
标志：{
背景颜色：“rgba（0,0,0,0）”，
宽度：160，
身高：52
},
背景：{
弹性：1，
flexDirection:“列”
},
标题：{
尺码：18，
textAlign:'中心'，
背景颜色：“rgba（0,0,0,0）”，
颜色：“白色”
}
});

与其将内容包装在

中，不如将其包装在

绝对位置的元素中，并将其延伸到屏幕上

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


它应该出现在背景图像的前面
var styles=StyleSheet.create({
背景容器：{
位置：'绝对'，
排名：0，
底部：0，
左:0,，
右:0,，
},
容器：{
弹性：1，
对齐项目：“居中”，
},
覆盖：{
不透明度：0.5，
背景颜色：'#000000'
},
标志：{
背景颜色：“rgba（0,0,0,0）”，
宽度：160，
身高：52
},
背景：{
弹性：1，
flexDirection:“列”
},
标题：{
尺码：18，
textAlign:'中心'，
背景颜色：“黑色”，
颜色：“白色”
}
});
我也有同样的问题，我使用了


//在这里，您可以使用justifyContent和alignItems更改图像的位置
我想使用图像作为标题，在上面我必须放回图标，这也是一个图像，所以我尝试将标题图像放进去。但当我给它一个100%的宽度是好的，但我也想给它一个40%的屏幕高度，但不想削减图像到40%，我该怎么办？你可以调整高度，宽度，同时指定图像的风格。正如上面我给的高度和宽度为100%，你可以指定你的相应。例如：
<View style={{height: 55,width: 55,justifyContent: 'center',alignItems: 'center'}}>

   <ImageBackground  source={{uri:this.state.image1}} style={{height: 50,width: 50}}>

            <View style={{flex: 1,justifyContent: 'flex-end',alignItems: 'flex-start'}}> //here you can change position of image with justifyContent and alignItems
                 <Image
                  source={ {uri:this.state.image2}}
                  style={{width: 20 , height: 20 ,alignItems: 'center',justifyContent: 'center',borderWidth: 1,borderColor: '#fff',borderRadius: 30}} />
            </View>

    </ImageBackground>

</View>

<ImageBackground style={{width:100, height:100, jsutifyContent:'center}}>
<Image/> //childimage
</ImageBackground