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

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

2 个答案: