React Native集成Drawer Navigator时react-native-reanimated报错求助

问题详情 #

开发React Native应用，集成了React Navigation和React Native Paper，首屏使用Stack Navigator，新增Drawer Navigator时，取消注释const Drawer = createDrawerNavigator();后触发以下错误：

Error: Failed to create a worklet.  
Did you forget to add Reanimated Babel plugin in babel.config.js?  
See installation docs at  
https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation#babel-plugin., js engine: hermes

当前配置 #

package.json #

{
    "name": "fast_pass_fe_mobile",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "android": "react-native run-android",
        "ios": "react-native run-ios",
        "lint": "eslint .",
        "start": "react-native start",
        "test": "jest"
    },
    "dependencies": {
        "@react-aria/ssr": "^3.7.0",
        "@react-navigation/drawer": "^6.6.3",
        "@react-navigation/native": "^6.1.7",
        "@react-navigation/stack": "^6.3.17",
        "@reduxjs/toolkit": "^1.9.5",
        "react": "18.2.0",
        "react-native": "0.72.1",
        "react-native-gesture-handler": "^2.12.0",
        "react-native-paper": "^5.9.1",
        "react-native-reanimated": "^3.3.0",
        "react-native-safe-area-context": "^3.4.1",
        "react-native-screens": "^3.22.0",
        "react-native-svg": "^12.1.1",
        "react-native-vector-icons": "^9.2.0",
        "react-redux": "^8.1.1"
    },
    "devDependencies": {
        "@babel/core": "^7.20.0",
        "@babel/preset-env": "^7.20.0",
        "@babel/runtime": "^7.20.0",
        "@react-native/eslint-config": "^0.72.2",
        "@react-native/metro-config": "^0.72.7",
        "@tsconfig/react-native": "^3.0.0",
        "@types/metro-config": "^0.76.3",
        "@types/react": "^18.0.24",
        "@types/react-test-renderer": "^18.0.0",
        "babel-jest": "^29.2.1",
        "eslint": "^8.19.0",
        "jest": "^29.2.1",
        "metro-react-native-babel-preset": "0.76.5",
        "prettier": "^2.4.1",
        "react-test-renderer": "18.2.0",
        "typescript": "4.8.4"
    },
    "engines": {
        "node": ">=16"
    }
}

babel.config.js #

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

已尝试方案 #

• 将react-native-reanimated降级至1.x、2.x版本，问题未解决。

解决步骤 #

1. 修改babel.config.js配置：
   把react-native-reanimated/plugin移到全局plugins数组中，确保开发环境也能加载该插件，且必须放在插件列表的最后一位：

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

2. 清除缓存并重启服务：

   • 执行npx react-native start --reset-cache清除Metro缓存
   • 停止当前Metro服务后重新启动
   • 重新构建项目（如npx react-native run-android或npx react-native run-ios）

3. 验证依赖安装：
   执行npm install或yarn install确认所有依赖已正确安装，无缺失或版本冲突。

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