使用react-native-reanimated v2出现global.__reanimatedWorkletInit is not a function报错

错误根源 #

• 导入runOnUI时包名填写错误，正确包名是react-native-reanimated，你写的react-native-animated是无效包名
• 未完成react-native-reanimated v2+的完整初始化配置，仅添加导入语句不足以支持worklet语法
• 配置修改后未清理项目缓存，新配置未生效

修复步骤 #

1. 修正导入语句
   将原有错误导入替换为以下代码：

// 全局引入支持worklet语法
import 'react-native-reanimated';
// 从正确包中引入runOnUI
import { runOnUI } from 'react-native-reanimated';

2. 配置babel插件
   打开项目根目录的babel.config.js，确认在plugins数组最后一位添加reanimated插件，配置示例如下：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    // 其余原有插件保持不变
    'react-native-reanimated/plugin'
  ]
};

3. 清理缓存重启项目
   配置修改后必须重置缓存重新构建，否则配置不生效：

• 安卓运行命令：npx react-native run-android --reset-cache
• iOS先进入ios目录执行pod install，回到根目录运行命令：npx react-native run-ios --reset-cache

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