反应本机全角背景图像 'Android'

Question

我使用图像作为容器以获得全角背景。它在模拟器中运行正常，但是当我在设备上打开应用程序时，背景是白色的。谢谢关注

<Container>
    <Content>
      <Image 
        style={styles.bgImage}
        source={require('../../../images/login_bg.png')}>
        <View style={styles.wrapper}>
          <Image
            style={styles.logo}
            source={require('../../../images/logo.png')} />
          <Button
            style={styles.button}
            onPress={() => {this.logIn(username, password)}}>
            <Text style={styles.buttonText}>LOGIN</Text>
          </Button>
        </View>
        <View style={styles.footer}>
          <Text style={styles.version}>Version 4.0.0</Text>
          <Text style={styles.copyright}>&copy; All rights reserved. Araqich is registered trademark of Araqich LLC.</Text>
        </View>
      </Image>
    </Content>
  </Container>

Answer 1

我想如果你使用 alignSelf: 'stretch' 它会起作用

Answer 2

声明变量如下：

var width = Dimensions.get('window').width;

和你的风格

add : "width : width" with your other attributes

Answer 3

我不知道这是不是一个好方法。但我将我的图像用作带有 flex: 1 ，宽度：null，高度：null 的容器它在两个生产平台上都对我有用。 :

return(
<Image  source={require('/background_image.png')} style={{ flex: 1, width: null, height: null }} >

[ ... your JSX ... ]

</Image>
);

Answer 4

问题是从 psd 导出的图像不正确）它给出了 blob 错误，表示图像被覆盖

反应本机全角背景图像 'Android'

react native fullwidth background image 'Android'

android

background-image

react-native