背景图像不会出现在本机反应中

Question

我到处看了看，不知道为什么我的背景图像不工作路径很好，我已经尝试了一切，从将它包装在一个视图中，给它一个宽度和高度。它都不起作用。我是新手，所以我不知道这是一个常见的问题。登录按钮显示得很好，它纯粹是 bg 图像。 代码如下：

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

function WelcomeScreen(props) {
  return (
    <View>
      <ImageBackground
        style={styles.background}
        source={require("../assets/background.jpg")}
      >
        <View style={styles.loginButton}></View>
      </ImageBackground>
    </View>
  );
}

const styles = StyleSheet.create({
  background: {
    flex: 1,
  },
  loginButton: {
    width: "100%",
    height: 70,
    backgroundColor: "#fc5c65",
  },
});

Answer 1

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

function WelcomeScreen(props) {
  return (
    <View style={styles.background}>
      <ImageBackground
        style={styles.background}
        source={require("../assets/background.jpg")}
      >
        <View style={styles.loginButton}></View>
      </ImageBackground>
    </View>
  );
}

const styles = StyleSheet.create({
  background: {
    flex: 1,
  },
  loginButton: {
    width: "100%",
    height: 70,
    backgroundColor: "#fc5c65",
  },
});

Answer 2

向包含背景图像的视图添加样式似乎可行。如果其他人遇到此问题，请将您的代码更新为如下所示。

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

function WelcomeScreen(props) {
  return (
    <View style={styles.container}>
      <ImageBackground
        source={require("../assets/background.jpg")}
        style={styles.background}
      >
        <View style={styles.loginButton}></View>
      </ImageBackground>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "column",
  },
  background: {
    flex: 1,
    resizeMode: "cover",
  },
  loginButton: {
    width: "100%",
    height: 70,
    backgroundColor: "#fc5c65",
  },
});