React Navigation 6.1.1中createDrawerNavigator未定义TypeError问题求助

云上老周

2026-8-7

这个错误核心原因是React Navigation 6.x版本彻底重构了抽屉导航的API，不再直接导出createDrawerNavigator方法，以下是具体解决步骤：

确认依赖安装完整
确保已经安装抽屉导航所需的全部依赖，执行对应命令：
- 普通React Native项目：npm install @react-navigation/drawer react-native-gesture-handler react-native-reanimated
- Expo项目：expo install @react-navigation/drawer react-native-gesture-handler react-native-reanimated

修正导入与使用方式
旧版本的导入写法在6.x中已失效，替换成以下方式：
原错误导入：

import { createDrawerNavigator } from '@react-navigation/drawer';

改为正确导入：

import { Drawer } from '@react-navigation/drawer';

同时将原来通过createDrawerNavigator()创建导航器的写法，替换为<Drawer.Navigator>组件嵌套<Drawer.Screen>的形式，示例代码：

import { NavigationContainer } from '@react-navigation/native';
import { Drawer } from '@react-navigation/drawer';

function HomeScreen() {
  return (/* 页面内容 */);
}

function SettingsScreen() {
  return (/* 页面内容 */);
}

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>
  );
}

确保导航结构被根容器包裹
所有导航组件必须嵌套在<NavigationContainer>内部，这是React Navigation 6.x的强制要求，缺少会导致各类导航相关错误。
清除缓存重启项目
执行缓存重置命令避免旧代码残留：
```
npm start --reset-cache
```
之后重启模拟器或真机，重新加载项目。