使用@react-navigation/drawer@6.6.3时遇createDrawerNavigator未定义错误

我在使用React Native抽屉导航器时遇到如下错误，该错误与Stack Overflow上的一个现有问题一致：

This error is located at:
in App
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in FirstReactNative(RootComponent), js engine: hermes
** ERROR  TypeError: Cannot read property 'createDrawerNavigator' of undefined**

This error is located at:
in App
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in FirstReactNative(RootComponent), js engine: hermes

我已经按照官方的两个安装指南完成了配置：

• React Navigation入门安装指南
• 抽屉导航器安装指南

以下是我的项目配置信息：

package.json #

"dependencies": {
  "@react-navigation/drawer": "^6.6.3",
  "@react-navigation/native": "^6.1.7",
  "@react-navigation/stack": "^6.3.17",
  "@rneui/themed": "^4.0.0-rc.8",
  "react": "18.2.0",
  "react-native": "0.72.3",
  "react-native-gesture-handler": "^2.12.1",
  "react-native-paper": "^5.10.0",
  "react-native-safe-area-context": "^4.7.1",
  "react-native-screens": "^3.24.0",
  "react-native-vector-icons": "^10.0.0"
},

babel.config.js #

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

index.js #

import 'react-native-gesture-handler';
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

android\app\src\main\java\com\firstreactnative\MainActivity.java #

package com.firstreactnative;
import android.os.Bundle;
import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
import com.facebook.react.defaults.DefaultReactActivityDelegate;

public class MainActivity extends ReactActivity {
//....
    @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(null);
  }
}

app.js #

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

function App(): JSX.Element {

  const Stack = createStackNavigator();
  const Drawer = createDrawerNavigator();

}

补充信息：

• createStackNavigator()可以正常工作
• 调用createDrawerNavigator()时会触发错误
• 不需要实际使用导航器，仅调用该方法就会报错

解决方案 #

1. 重新安装依赖
   删除node_modules和锁文件，重新安装依赖：

   rm -rf node_modules package-lock.json
   npm install
   

   若使用yarn则执行：

   rm -rf node_modules yarn.lock
   yarn install
   

2. 确保react-native-reanimated正确安装
   抽屉导航依赖该库，执行安装并清理缓存：

   npm install react-native-reanimated@^2.12.0
   npx react-native start --reset-cache
   

3. 重装抽屉导航依赖
   卸载并重新安装@react-navigation/drawer：

   npm uninstall @react-navigation/drawer
   npm install @react-navigation/drawer@6.6.3
   

4. 修正Android配置
   将MainActivity.java中的super.onCreate(null)改为super.onCreate(savedInstanceState)，然后重新编译：

   @Override
   protected void onCreate(Bundle savedInstanceState) {
     super.onCreate(savedInstanceState);
   }
   

   编译命令：

   cd android && ./gradlew clean && cd ..
   npx react-native run-android
   

5. 彻底清理Metro缓存
   重启Metro服务并重置缓存：

   npx react-native start --reset-cache
   

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