React Native抽屉导航报错：Reanimated创建worklet失败与isConfigured未定义

问题分析 #

抽屉导航依赖react-native-reanimated和react-native-gesture-handler的正确初始化与配置，你遇到的Failed to create a worklet和Cannot read property 'isConfigured' of undefined错误，核心原因是这两个库的初始化顺序或配置不符合要求。

修复步骤 #

1. 调整Gesture Handler的导入顺序 #

react-native-gesture-handler必须在应用启动时最先初始化，修改项目入口文件（通常是App.js或index.js），将其导入放在最顶部：

import 'react-native-gesture-handler';
import React from 'react';
// 其他所有导入语句放在这之后

2. 修正Babel插件顺序 #

确保react-native-reanimated/plugin是Babel配置中的最后一个插件，因为它需要处理其他插件的输出结果：

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    // 如有其他插件，请放在此处
    'react-native-reanimated/plugin' // 必须是最后一项
  ],
};

3. 彻底清理缓存并重新构建 #

执行完整的缓存清理和依赖重装步骤，确保旧缓存不会干扰：

• 删除依赖文件与锁文件：

  rm -rf node_modules package-lock.json yarn.lock
  

• 重新安装依赖：

  npm install # 或 yarn install，根据你的包管理器选择
  

• 清理Metro缓存并重启服务：

  npx react-native start --reset-cache
  

• 清理iOS构建缓存并重新运行：

  npx react-native run-ios --clean
  

4. 避免延迟加载抽屉相关组件 #

不要用React.lazy等懒加载方式导入抽屉导航或其关联组件，确保组件在应用启动时正常初始化。

5. M1 Mac兼容处理 #

如果上述步骤无效，尝试用Rosetta终端执行构建命令：

• 找到「终端」应用，右键选择「显示简介」，勾选「使用Rosetta打开」，重启终端后重新执行构建命令。

验证 #

完成所有步骤后，重新启动iOS模拟器，抽屉导航应能正常运行，不再出现Reanimated相关错误。

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