Expo CLI迁移至React Native CLI后遇Reanimated Worklet创建失败求助

针对你从Expo CLI迁移到React Native CLI后遇到的这个问题，按以下步骤逐一排查：

1. 确认Babel插件顺序 #

Reanimated的Babel插件必须放在所有其他插件最前面，你的配置顺序是对的，但需确保没有其他隐藏插件干扰：

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

2. 彻底清除缓存 #

迁移后缓存残留是常见问题，执行以下操作：

• 重置Metro缓存：npx react-native start --reset-cache
• 若无效，删除依赖文件重装：

  rm -rf node_modules && rm package-lock.json yarn.lock
  npm install # 或 yarn install
  

3. 检查版本兼容性 #

确保Reanimated版本与你的React Native版本匹配（比如RN 0.70+对应Reanimated 2.10+），不兼容则重装适配版本：

npm uninstall react-native-reanimated
npm install react-native-reanimated@适配版本号

4. 配置Metro支持Reanimated #

在metro.config.js中添加Reanimated的Transformer配置（RN 0.72+需额外配置）：

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

module.exports = mergeConfig(getDefaultConfig(__dirname), {
  transformer: {
    babelTransformerPath: require.resolve('react-native-reanimated/plugin'),
  },
});

5. 重启开发环境 #

完全关闭当前Metro服务器、模拟器/真机，重新执行：

npx react-native run-android # 或 run-ios

6. 检查Worklet代码写法 #

确保使用Worklet的函数顶部正确标注指令：

const animateFunc = () => {
  'worklet';
  // 动画逻辑代码
};

迁移后其他常见问题排查 #

• 替换Expo专属库：所有expo-*开头的库（如expo-font、expo-image）需替换为React Native CLI兼容的替代方案
• 原生配置检查：
  • Android：在android/app/build.gradle中确认Reanimated依赖，MainApplication.java中注册ReanimatedPackage
  • iOS：进入ios目录执行pod install，确保Podfile包含Reanimated依赖

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