调用@react-navigation/drawer出现undefined is not an object报错如何解决

问题核心原因 #

报错本质是@react-navigation/drawer依赖的react-native-reanimated v2 原生模块未正确初始化，导致NativeEventEmitter实例为空，连带模块导出的createDrawerNavigator对象未定义。

按顺序执行以下解决步骤 #

• 检查babel.config.js配置
  确保项目根目录下的babel.config.js已添加reanimated插件，且放在plugins数组最后一位：

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

• 检查入口文件导入配置
  项目入口文件（通常为index.js/App.tsx）第一行必须先导入手势处理库：

  import 'react-native-gesture-handler';
  

• 清理全量缓存后重新构建
  依次执行以下命令清理所有旧构建产物，避免缓存干扰：

  # 删除旧依赖和锁定文件
  rm -rf node_modules package-lock.json yarn.lock
  # 重新安装依赖
  npm install
  # 安卓端清理构建缓存
  cd android && ./gradlew clean && cd ..
  # iOS端清理依赖缓存（iOS开发执行）
  cd ios && rm -rf Pods Podfile.lock && pod install && cd ..
  # 启动打包服务时重置缓存
  npx react-native start --reset-cache
  

• 修复依赖冲突
  你的依赖列表中react-native-pager为已废弃的无效包，和React Navigation依赖的react-native-pager-view存在命名冲突，直接卸载：

  npm uninstall react-native-pager
  

• 兼容版本适配
  若上述步骤仍未解决，可将react-native-reanimated降级到和RN 0.66.1、React Navigation 6.x 适配性经过验证的2.1.0版本：

  npm install react-native-reanimated@2.1.0
  

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