React Native应用程序中的全屏背景图像 [英] Full screen background image in React Native app

问题描述

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

I'm trying to set a full background image on my login view.

我在Stackoverflow中发现了这个问题:

I found that question here in Stackoverflow: What's the best way to add a full screen background image in React Native

所以我做到了，但是没有用:

So I did it like there, but it didn't work:

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: {
  },
});

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

I don't know what I'm doing wrong. Any help would be appreciated.

这是应用程序，以防万一您想看看->

Here is the app, in case you guys want to take it a look -> Full size background image example on rnplay.org. I don't know how to do it editable :/

谢谢:)

推荐答案

尝试以下两种方法之一:

Try either of these two methods:

第一个与您的相似，除了您的登录表单上有position: 'absolute':

The first is similar to yours except you have position: 'absolute' on your login form:

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用作容器:

The second method involves using the ImageView as a container:

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

这篇关于React Native应用程序中的全屏背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！