React Native导航报错：找不到Onboarding屏幕的component相关属性如何解决

你App.js中导入的Onboarding值为undefined，React Navigation拿到无效的组件参数因此触发报错，问题出在默认导出和命名导入不匹配，以及目录统一导出的配置缺失：

1. onboarding.js中是默认导出OnboardingScreen组件，不存在名为Onboarding的命名导出
2. 你从./src/screens目录统一导入组件，但未在该目录的index.js文件中配置Onboarding的导出规则

两种方案二选一即可：

方案1：直接从组件文件导入（适合小项目） #

直接修改App.js中的导入语句，将

import {Onboarding} from "./src/screens"

替换为：

// 注意路径里的文件名要和你实际的onboarding.js大小写完全一致
import Onboarding from './src/screens/onboarding'

方案2：完善screens目录的统一导出规则（适合多组件项目） #

在./src/screens/index.js文件中添加如下导出代码：

// 同样注意路径文件名大小写匹配
export { default as Onboarding } from './onboarding'

原有App.js中的导入写法不需要修改。

• 你的onboarding.js中已经导入了第三方库react-native-onboarding-swiper命名为Onboarding，不要修改自己业务组件的命名避免冲突，保持现有OnboardingScreen的命名即可
• 同理检查你的AuthLoadingScreen导入是否正确：你当前用的是默认导入import AuthLoadingScreen from './src/screens'，需要确保./src/screens/index.js中有对应的默认导出配置，否则也会触发同类报错

修改完成后，在App.js中导入Onboarding的代码后添加一行调试代码：

console.log(Onboarding)

运行项目后查看终端输出，如果打印的是函数组件则说明导入正常，报错即可解决；如果还是undefined则需要检查文件路径、文件名大小写、导出语法是否正确。

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