React Native使用Drawer Navigation时Reanimated2及Invariant Violation报错

后续抛出的Invariant Violation: Module AppRegistry is not a registered callable module属于连锁异常，根因是第一个Reanimated 2 worklet创建失败错误——JS bundle执行到Reanimated初始化阶段就中断，根本没走到AppRegistry注册逻辑，不用优先排查入口文件路径问题，按以下步骤逐一排查即可：

1. 修复Babel插件配置 #

Reanimated 2必须配置专属babel插件才能正常工作，且插件位置有严格要求：

• 打开项目根目录的babel.config.js文件
• 在plugins数组的最后一项添加react-native-reanimated/plugin，放在其他插件后面才会生效，参考配置：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    // 其他自定义插件全部放在这行之前
    'react-native-reanimated/plugin'
  ]
};

2. 全量清理缓存重启服务 #

Babel配置修改后不会自动生效，必须清理旧的编译缓存：

• 先关闭所有正在运行的Metro打包终端、模拟器/真机上的旧App
• 执行带缓存清理的启动命令：

npx react-native start --reset-cache

• 如果清理Metro缓存后仍报错，重装依赖彻底清缓存：

# npm用户执行
rm -rf node_modules && npm install
# yarn用户执行
rm -rf node_modules && yarn install

• iOS端需额外重新安装pod依赖：

cd ios && pod install --repo-update && cd ..

• 重新执行编译命令启动App，不要直接用热重载：

# 安卓
npx react-native run-android
# iOS
npx react-native run-ios

3. 检查原生端配置 #

如果以上操作后仍报错，核对原生端构建配置：

• 安卓端：打开android/app/build.gradle，确认文件末尾引入了Reanimated的gradle脚本，同时推荐开启Hermes引擎适配Reanimated 2：

project.ext.react = [
  enableHermes: true
]
// 文件末尾添加
apply from: "../../node_modules/react-native-reanimated/react-native-reanimated.gradle"

• iOS端：确认Podfile没有屏蔽Reanimated依赖，执行pod install后Pods目录下存在Reanimated相关源文件
• 如果是0.60以下的RN版本，需要手动link Reanimated依赖；0.60以上版本autolink失效的场景可以执行npx react-native link react-native-reanimated手动关联

4. 核对导航依赖版本兼容性 #

• 确认@react-navigation/drawer和Reanimated大版本匹配：v6版本抽屉导航对应Reanimated 2.x版本，不要错装Reanimated 1.x或者3.x不兼容版本
• 确认抽屉导航的所有peer依赖都已正确安装：react-native-gesture-handler、react-native-reanimated、react-native-screens、react-native-safe-area-context，缺任何一个都会导致初始化阶段崩溃

注意：只要修改了原生端配置或者依赖版本，必须重新执行编译命令打包安装App，Fast Refresh/热重载不会加载原生层的改动。

内容的提问来源于stack exchange，提问作者Ali Khan