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

问题描述

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

解决方法

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

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

这是我得到的：

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

,

尝试这样的事情。

样式

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>