React Native应用程序中的全屏背景图像

Question

我正在尝试在登录视图中设置完整的背景图像.

我在Stackoverflow中找到了这个问题:在React Native中添加全屏背景图像的最佳方法是什么

所以我就像那样做了,但它不起作用:

var login = React.createClass({
  render: function() {
    return (
      <View style={ styles.container }>
        <Image source={require('../images/login_background.png')} style={styles.backgroundImage} />
        <View style={ styles.loginForm }>
          <Text>TEST</Text>
        </View>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
  },

  backgroundImage: {
    flex: 1,
    resizeMode: 'cover', // or 'stretch'
  },

  loginForm: {
  },
});

我不知道我做错了什么.任何帮助,将不胜感激.

编辑:这是应用程序,如果你们想看一看 - > rnplay.org上的全尺寸背景图片示例.我不知道怎么做可编辑:/

谢谢 :)

Answer 1

尝试以下两种方法之一:

第一个类似于你的,除了你position: 'absolute'的登录表格:

var styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    backgroundImage: {
        flex: 1,
        resizeMode: 'cover', // or 'stretch'
    },
    loginForm: {
        position: 'absolute',
        top: 0,
        bottom: 0,
        left: 0,
        right: 0
    },
});

第二种方法涉及使用ImageView作为容器:

render: function() {
    return (
        <View style={ styles.container }>
            <Image source={require('../images/login_background.png')} style={styles.backgroundImage}>
                <View style={ styles.loginForm }>
                    <Text>TEST</Text>
                </View>
            </Image>
        </View>
    );
}

Answer 2

您应该使用ImageBackground组件。查看React Native Docs

<ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    <Text>Inside</Text>
</ImageBackground>