React Native中自定义WelcomeScreen.js无法导入App.js如何解决

问题根因排查 #

• 1. 导入导出不匹配：你的WelcomeScreen是export default默认导出，但是App.js里用了{ WelcomeScreen }命名导入的语法，这是最直接的导入失败原因
• 2. 样式依赖包导入错误：WelcomeScreen里的StyleSheet从react-native-web导入，React Native原生项目应该统一从react-native导入核心API
• 3. 组件属性拼写错误：ImageBackground的样式属性是style，不是styles
• 4. 可选优化：你当前的ImageBackground没有嵌套子元素，测试的时候可以先加个文本验证渲染正常

修正后 WelcomeScreen.js 代码 #

// 统一从react-native导入核心API
import { StyleSheet, ImageBackground } from 'react-native';

function WelcomeScreen(props) {
    return (
        // 修正style属性拼写
        <ImageBackground style={styles.background} source={require("../background.jpg")}>
        </ImageBackground>
    );
}

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

export default WelcomeScreen;

修正后 App.js 代码 #

import React from 'react';
// 冗余导入可删除
import { StyleSheet, Text, View } from 'react-native';
// 默认导出不需要加花括号，直接导入即可
import WelcomeScreen from './app/assets/screens/WelcomeScreen';

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

补充注意事项 #

• 如果修正后仍提示图片找不到，确认background.jpg的存放路径是在app/assets/目录下，和screens文件夹同级，相对路径和WelcomeScreen.js的位置匹配
• 开发阶段可以先给ImageBackground加个临时的backgroundColor属性，排除是图片加载失败导致的空白问题

内容的提问来源于stack exchange，提问作者Vincent