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

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

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

这是我得到的：

您还可以尝试使用其他图片作为背景，但这可以解决您的问题?

Answer 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>

反应本机背景图像大小调整

2 个答案: