我是新手,而且我正在按照一个教程来学习这门语言. 我现在正在try 使用ImageBackground设置背景图像.

欢迎屏幕.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 />
  );
}

现在我得到了这个错误:Error: Image: asset with ID "1" could not be found. Please check the image source or packager.

我的项目文件夹里有一个app文件夹.在这个应用程序文件夹中,我有一个Assets文件夹和一个Screens文件夹.WelcomeScreen.js位于Screens文件夹中.后台.jpg位于Assets文件夹中,App.js位于主/project文件夹中.

我似乎找不到任何方法来修复这个错误.

推荐答案

try 将您的模块导入从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;

您不需要在WelcomeScreen.js文件路径中添加./app

App.js

import WelcomeScreen from "./screens/WelcomeScreen";

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

希望这个能帮上忙!

React-native相关问答推荐

PubNubReact无法工作,因为它已被废弃

AWS Amplify处理后端错误

我们如何才能将我们自己的应用程序(IOS)排除在共享表中?

未执行迁移?

在 React Native 中使用 Flatlist scrollView 时的模式关闭

不能总是在 Chrome 中设置 React Native 断点

React Native React 导航标题按钮事件

'React native run android' 在模拟器中启动应用程序后立即停止

Invariant Violation:requireNativeComponent: "RNCWebView" was not found in the UIManager

React-Native:save user preferences

如何启用 stacktrace react-native run-android 命令?

异步(async)/等待(await)和递归

redux saga 的delay延迟功能不起作用

如何删除不需要的expo 模块

通过 ToolbarAndroid => onIconClicked 显示 DrawerLayoutAndroid

如何在 React Native 上获取设备的 ip?

如何在 react-native 中从 AsyncStorage 中删除元素

React Native ScrollView 在 iOS 上从底部被截断

如何在 React Native 中重复图案图像以创建背景?

React Native:文本 node 的 Auto宽度