已配置Reanimated Babel插件仍报错：Failed to create a worklet求助

我正按照react-navigation文档的所有步骤创建一个简易抽屉导航，且已安装所需的全部依赖。

我的package.json文件内容如下：

{
  "name": "drawer-test",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@react-native-community/viewpager": "^5.0.11",
    "@react-navigation/drawer": "^6.6.4",
    "@react-navigation/native": "^6.1.8",
    "expo": "~49.0.15",
    "expo-status-bar": "~1.6.0",
    "react": "18.2.0",
    "react-native": "0.72.6",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-reanimated": "~3.3.0",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "~3.22.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}

但运行时遇到如下错误：

Error: Failed to create a worklet. Did you forget to add Reanimated Babel plugin in babel.config.js? See installation docs at ..., js engine: hermes

尽管我的babel.config.js文件中已添加Reanimated插件，且该插件位于插件数组的最后一位：

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: ["react-native-reanimated/plugin"],
  };
};

请问该如何解决这个问题？

可行的解决步骤 #

• 清除缓存并重启Metro服务
  停止当前运行的Metro，执行以下命令清除缓存后重启：

  npx expo start --clear
  

  缓存残留是这类问题的常见诱因，此操作能强制加载最新的Babel配置。

• 确认入口文件的手势处理器导入
  在项目入口文件（如App.js）的最顶部添加：

  import 'react-native-gesture-handler';
  

  这是Reanimated与抽屉导航协同工作的必要前置步骤，很多时候会被遗漏。

• 重新安装依赖
  删除node_modules和锁文件后重新安装：

  rm -rf node_modules package-lock.json
  npm install
  

  安装过程中可能存在依赖不完整或版本冲突，重新安装能解决这类问题。

• 检查Babel配置细节
  确保react-native-reanimated/plugin确实是插件数组的最后一项，Reanimated插件要求必须放在所有其他插件之后，否则会干扰工作编译流程。

• 验证版本兼容性
  当前使用的expo ~49.0.15与react-native-reanimated ~3.3.0版本是兼容的，但如果后续调整版本，需对照Expo官方文档确认版本适配关系，避免因版本不匹配导致异常。

内容的提问来源于stack exchange，提问作者Ahmed salem