React Native导入Drawer组件报错：Cannot read property 'is Configured' of undefined

出现Cannot read property 'is Configured' of undefined错误，核心原因是导航上下文未被正确注入，常见触发场景包括：

• 根组件未用NavigationContainer包裹所有导航组件
• Drawer导航器的导入或初始化方式错误
• React Navigation相关依赖版本不兼容

针对你的项目，按以下步骤逐一排查：

1. 补足根组件的导航容器包裹
   确保App.tsx中，Drawer导航组件被NavigationContainer包裹，正确结构示例：

   import { NavigationContainer } from '@react-navigation/native';
   import Drawer from './navigation/Drawer';
   
   export default function App() {
     return (
       <NavigationContainer>
         <Drawer />
       </NavigationContainer>
     );
   }
   

   所有导航组件必须在NavigationContainer内部才能获取到导航上下文，这是最容易遗漏的核心配置。

2. 修正Drawer导航器的初始化逻辑
   检查你的Drawer导航文件（如navigation/Drawer.tsx），确保正确创建并导出导航器：

   import { createDrawerNavigator } from '@react-navigation/drawer';
   import HomeScreen from '../screens/HomeScreen';
   // 导入其他页面组件
   
   const Drawer = createDrawerNavigator();
   
   function DrawerNavigator() {
     return (
       <Drawer.Navigator initialRouteName="Home">
         <Drawer.Screen name="Home" component={HomeScreen} />
         {/* 配置其他路由 */}
       </Drawer.Navigator>
     );
   }
   
   export default DrawerNavigator;
   

   注意：不要在Drawer导航文件中重复包裹NavigationContainer，仅在根组件App.tsx中添加一次即可。

3. 同步依赖版本并配置Reanimated
   确保@react-navigation/native、@react-navigation/drawer及配套依赖版本兼容，执行以下命令更新：

   npm install @react-navigation/native @react-navigation/drawer
   npm install react-native-gesture-handler react-native-reanimated
   

   同时在babel.config.js中添加Reanimated插件配置：

   module.exports = {
     presets: ['module:metro-react-native-babel-preset'],
     plugins: ['react-native-reanimated/plugin'],
   };
   

   修改完成后，重启Metro服务并清除缓存（执行npx react-native start --reset-cache）再运行项目。

4. 排查上下文冲突
   若以上步骤无效，检查项目中是否存在自定义全局状态管理工具（如Redux、Zustand）或其他导航相关配置，是否干扰了导航上下文的正常注入。

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