reactjs - 反应本机背景图像大小

Question

我是 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

Answer 1

尝试这样的事情。

风格

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>

Answer 2

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

图片链接：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;

这就是我得到的：

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