react-native - 错误: Image: asset with ID "1" could not be found. 请检查镜像源或打包器

Question

我是 React Native 新手，我正在按照教程学习该语言。 我现在尝试使用 ImageBackground 设置背景图像。

WelcomeScreen.js:

import React from 'react';
import { ImageBackground, StyleSheet } from 'react-native-web';

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

const styles = StyleSheet.create({
    background: {
        flex: 1
    }
})

export default WelcomeScreen;

App.js

import React from 'react';
import { View } from 'react-native';
import WelcomeScreen from './app/screens/WelcomeScreen';

export default function App() {

  return (
    <WelcomeScreen />
  );
}

现在我收到此错误:错误:图像:无法找到 ID 为“1”的 Assets 。请检查图片来源或打包器。

我的项目文件夹中有一个 app 文件夹。在此应用程序文件夹中，我有 Assets 文件夹和屏幕文件夹。 WelcomeScreen.js 位于 Screens 文件夹中。 background.jpg 位于 asset 文件夹中，App.js 位于 main/project 文件夹中。

我似乎找不到任何方法来修复此错误。

Answer 1

尝试将模块导入从 react-native-web 更改为 react-native

WelcomeScreen.js

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

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

const styles = StyleSheet.create({
  background: {
    flex: 1,
  },
});

export default WelcomeScreen;

您不需要将 ./app 添加到 WelcomeScreen.js 文件路径

App.js

import WelcomeScreen from "./screens/WelcomeScreen";

export default function App() {
  return <WelcomeScreen />;
}

希望这有帮助!