使用react-navigation拆分组件报错：路由Home的组件必须是React组件

这个报错几乎都是组件的导出/导入不匹配或者组件定义不符合要求导致的——毕竟同一个文件能正常运行，拆分后出问题，说明逻辑本身没问题，只是文件间的引用环节出错了。我给你梳理几个最常见的原因和解决方法：

1. 导出与导入的方式不匹配 #

这是最容易踩的坑，React组件的导出分两种：默认导出和命名导出，两者的导入方式必须严格对应。

情况A：使用默认导出（推荐） #

在你的./screens/HomeScreen.js里，确保是默认导出组件：

import React from 'react';
import { View, Text } from 'react-native';

// 定义函数组件
const HomeScreen = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
};

// 默认导出组件
export default HomeScreen;

然后在App.js里这样导入：

// 不需要花括号，直接导入
import HomeScreen from './screens/HomeScreen';

情况B：使用命名导出 #

如果用命名导出，HomeScreen.js要这样写：

import React from 'react';
import { View, Text } from 'react-native';

// 命名导出组件
export const HomeScreen = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
};

对应的App.js导入必须加花括号：

// 必须用花括号包裹组件名
import { HomeScreen } from './screens/HomeScreen';

2. 组件定义不符合React组件要求 #

确保你在HomeScreen.js里定义的是合法的React组件：

• 函数组件：必须是一个返回JSX元素的函数（不能是普通对象、非返回JSX的函数）
• 类组件：必须继承React.Component并实现render()方法

❌ 错误示例（这不是合法组件）：

// 错误：这是一个普通对象，不是React组件
const HomeScreen = {
  content: <Text>Home</Text>
};
export default HomeScreen;

✅ 正确的函数组件（就是你在单文件里写的那种）：

const HomeScreen = () => {
  return <Text>Home Screen</Text>;
};

3. 文件路径或文件名错误 #

检查App.js里的导入路径是否正确：

• 如果screens文件夹和App.js在同一目录下，路径是./screens/HomeScreen（注意不需要加.js，React Native会自动识别）
• 注意文件名大小写：如果你的系统是Linux/macOS，文件名是区分大小写的，比如homescreen.js和HomeScreen.js是两个不同的文件，必须和导入时的名称一致

4. 检查语法错误 #

有时候这个报错是“假象”，根源是HomeScreen.js里有语法错误（比如少了闭合标签、import语句写错），导致组件无法被正确加载。你可以打开控制台，看看有没有其他更具体的语法报错，先解决那些问题，这个组件错误可能就自动消失了。

按照上面的步骤排查，基本就能解决问题啦！

内容的提问来源于stack exchange，提问作者B Roy Dawson