React Native使用Drawer组件时出现AppRegistry未注册错误求助

错误信息 #

Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.

模拟器屏幕无任何内容，使用的Android模拟器版本为Pixel_4_XL_API_31。

项目配置文件 #

babel.config.js #

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

package.json #

{
  "name": "rn220720",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-navigation/native": "6.0.11",
    "@react-navigation/native-stack": "6.7.0",
    "react": "17.0.2",
    "react-native": "0.65.1",
    "react-native-safe-area-context": "4.3.1",
    "react-native-screens": "3.15.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-jest": "^26.6.3",
    "eslint": "7.14.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.66.0",
    "react-native-codegen": "^0.0.7",
    "react-test-renderer": "17.0.2"
  },
  "jest": {
    "preset": "react-native"
  }
}

已尝试的排查方法 #

• 删除Android Studio中的模拟器
• 执行npm cache clean --force清除npm缓存
• 执行./gradlew clean清理Android编译文件
• 重启电脑
• 改用yarn管理依赖，问题依旧

解决方案 #

1. 补全Drawer导航所需依赖 #

当前依赖中缺少Drawer导航必须的包，且未启用对应的Babel插件：

• 安装依赖：

  npm install @react-navigation/drawer react-native-reanimated
  # 或使用yarn
  yarn add @react-navigation/drawer react-native-reanimated
  

• 修改babel.config.js，取消注释Reanimated插件（注意插件需放在presets之后）：

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

2. 重置Metro缓存并重启服务 #

执行以下命令彻底清除缓存并重启Metro：

react-native start --reset-cache

3. 重新构建Android项目 #

完成上述步骤后，重新清理并构建Android项目：

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

4. 验证入口文件配置 #

检查android/app/src/main/java/com/rn220720/MainApplication.java（包名对应你的项目名）中的getJSMainModuleName方法，确认返回值为"index"：

@Override
protected String getJSMainModuleName() {
  return "index";
}

同时确认项目根目录的index.js文件存在且正确注册App：

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

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

内容的提问来源于stack exchange，提问作者엄명헌