Question

我将一个Image作为根节点放置，以使其成为我的View的背景。但似乎所有其他人的形象都变得无形...... 是否可以使用内置组件将图像置于背景之上，而无需任何插件？
在以下代码中，示例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

我认为你最好不要将你的内容包装在i中，而是将其包裹在<Image>定位的元素中，然后将其拉伸到屏幕上。

absolute

Answer 2

我遇到了同样的问题，我使用了<ImageBackground>

<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>

如何在React Native中将图像放在其他图像的顶部？

2 个答案: