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

Question

我到处都看过，但无法弄清楚为什么我的背景图片不起作用路径很好，我已经尝试了所有方法，包括将它包装在视图中，给它一个宽度和高度。 None 有效。我是本地人的新手，所以我不知道这是一个常见问题。登录按钮显示得很好，它纯粹是 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.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",
  },
});

Answer 2

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",
  },
});

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

Background Image wont appear in react native

mobile

android

ios

react-native