react-native实现NavigationDrawer时DrawerNavigator渲染报错如何解决

报错信息：React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

1. 检查导航库版本与导入方式 #

• 目前 React Navigation v5/v6 版本中，DrawerNavigator 已经从核心包移出到独立的@react-navigation/drawer包，错误导入会直接得到undefined值：
  错误导入示例（仅适用于v2/v4老版本）：

  import { DrawerNavigator } from 'react-navigation';
  

  正确导入步骤：
  1. 先安装对应依赖：npm install @react-navigation/drawer react-native-gesture-handler react-native-reanimated
  2. 导入方法并初始化实例：

  import { createDrawerNavigator } from '@react-navigation/drawer';
  const Drawer = createDrawerNavigator();
  

2. 检查组件导出导入是否匹配 #

• 所有注册到Drawer导航的屏幕组件，要确保导出和导入方式统一，不要混用默认导出和命名导出：
  若组件为默认导出：

  // 组件定义文件
  export default function HomeScreen() {
    // 组件逻辑
  }
  

  导入时不能加花括号，否则会得到undefined：

  // 错误写法
  import { HomeScreen } from './screens/HomeScreen';
  // 正确写法
  import HomeScreen from './screens/HomeScreen';
  

  若组件为命名导出export function HomeScreen()，导入时才需要加花括号。

3. 检查Drawer导航结构写法 #

• v5/v6版本的Drawer导航必须嵌套在NavigationContainer下，组件属性不能传错：
  正确结构示例：

  import { NavigationContainer } from '@react-navigation/native';
  import { createDrawerNavigator } from '@react-navigation/drawer';
  import HomeScreen from './screens/HomeScreen';
  import SettingsScreen from './screens/SettingsScreen';
  
  const Drawer = createDrawerNavigator();
  
  export default function App() {
    return (
      <NavigationContainer>
        <Drawer.Navigator initialRouteName="Home">
          <Drawer.Screen name="Home" component={HomeScreen} />
          <Drawer.Screen name="Settings" component={SettingsScreen} />
        </Drawer.Navigator>
      </NavigationContainer>
    );
  }
  

  注意不要拼错组件名称（比如把Drawer.Screen写成Draw.Screen），也不要给component属性传undefined值。

4. 快速验证手段 #

• 导入createDrawerNavigator后可以直接打印该值，确认拿到的是函数而非undefined，缩小问题范围
• 逐行检查render方法内的所有自定义组件，排除拼写错误导致的组件不存在问题

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