如何在React Native中将图像放在其他图像的顶部？ [英] How to place an Image on top of other Image in React Native?

问题描述

我将一个Image作为根节点放置，以使其成为我的View的背景。但似乎所有其他图像都变得不可见了......
是否可以使用内置组件将图像置于背景之上，而无需任何插件？

在以下代码中， landing-background 用作背景，我的徽标图片是可见的，但仅在背景被删除时才会显示。
文字显示在背景之上，没有任何顾虑......

I placed an Image as a root node in order to make it a background for my View. But it appears that all others image become invisible... Is it any way to place an image on top of the background using built-in components, without any plugins?
In the following code sample landing-background is used as a background, my logo image is visible, but only if background is removed.
Text is showing on top of the background without any concerns...

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

推荐答案

而不是将您的内容包装在<$ c $中c>< Image> ，我认为你最好将它包装在一个绝对 ly的元素中并让那个伸展覆盖屏幕。

Rather than wrapping your content in the <Image>, I think you would be better off wrapping that in an absolutely positioned element and having that stretch to cover the screen.

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

这篇关于如何在React Native中将图像放在其他图像的顶部？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！