反应本机背景图像大小答案

【问题标题】：React Native Background Image sizing反应本机背景图像大小
【发布时间】：2020-12-15 02:26:28
【问题描述】：

我是 react native 的新手，我想使用 ImageBackground。

但是，当我尝试使用以下代码使其全屏显示时：

import React from 'react';
import { StyleSheet, ImageBackground,Text, View } from 'react-native';

const Signin = () => {
    return (
        <ImageBackground source={require('./images/background.jpg')} style={styles.image}> 
            <Text>Hello</Text>
        </ImageBackground>
            
    )
}


const styles = StyleSheet.create({
    image: {
        flex: 1,
        width: '100%',
        height: '100%',
        resizeMode:'cover'
    }
  });

export default Signin;

它只返回我屏幕一半的图片。关于它为什么这样做的任何想法？

我的初始图像属性如下：

我的初始图片可以在这里找到：https://unsplash.com/photos/0AwoTNSdwV

【问题讨论】：

这能回答你的问题吗？ stackoverflow.com/questions/29322973/…
不幸的是，没有......我在发布我的问题之前查看了这个答案

标签： reactjs react-native imagebackground

【解决方案1】：

我在我的计算机上尝试了您的代码，但问题在于您使用的图像。复制以下代码并尝试，但这次下载这张图片并使用它而不是您提供的那张。

图片链接：https://drive.google.com/file/d/1brXApmH6b_t6pscY9jzt_TsJI9NglWGL/view?usp=sharing

代码：

import React from "react";
import { StyleSheet, ImageBackground, Text, View } from "react-native";

const Signin = () => {
  return (
    <ImageBackground
      source={require("./images/backgroundImage.jpg")}
      style={styles.image}
    >
      <Text>Hello</Text>
    </ImageBackground>
  );
};

const styles = StyleSheet.create({
  image: {
    flex: 1,
    width: "100%",
    height: "100%",
    resizeMode: "cover",
    justifyContent: "center",
    alignItems: "center",
  },
});

export default Signin;

这是我得到的：

您也可以尝试不同的图片作为背景，但这应该可以解决您的问题?

【讨论】：

请将您尝试设置为背景的图片发给我，然后我会在我的机器上尝试代码并为您提供解决方案
这里是初始图像：unsplash.com/photos/0AwoTNSdwVM
是的，检查我刚刚编辑并发布的修改后的答案。告诉我进展如何

【解决方案2】：

试试这样的。

样式

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

查看

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

【讨论】：