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

时间:2020-08-26 09:53:42

标签: reactjs react-native imagebackground

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

它只返回屏幕一半的图片。 为什么这样做呢?

enter image description here

我的初始图像属性如下: enter image description here

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

2 个答案:

答案 0 :(得分:0)

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

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

这是我得到的: enter image description here

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

答案 1 :(得分:0)

尝试这样的事情。

样式

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>