React Native中Reanimated报错及版本不匹配问题求助

作为React Native新手，使用react-native-draggable-flatlist开发时遇到以下问题：

1. 初始错误：

Error: [Reanimated] valueUnpacker is not a worklet, js engine: hermes

2. 添加react-native-reanimated/plugin到babel配置后，出现版本不匹配错误：

Error: [Reanimated] Mismatch between JavaScript part and native part of Reanimated (3.5.1 vs 3.3.0).

检查依赖仅存在react-native-reanimated@3.5.1（由react-native-draggable-flatlist@4.0.1引入），已在package.json设置版本覆盖并执行expo -c重置缓存，但问题未解决。

1. 匹配Expo SDK与Reanimated版本 #

Expo SDK会绑定固定版本的Reanimated，你看到的Native端3.3.0是Expo自带的版本，强行安装更高版本会导致JS与Native端不兼容。执行以下命令安装与当前Expo SDK兼容的Reanimated版本：

npx expo install react-native-reanimated@latest --check

2. 清理依赖并重新安装 #

删除package.json中的版本覆盖配置，然后执行：

rm -rf node_modules
rm package-lock.json # 若使用yarn则删除yarn.lock
npm install # 或 yarn install

3. 彻底清除所有缓存 #

除了expo -c，还需清除Metro及原生缓存：

• 清除Metro缓存：

npx react-native start --reset-cache

• 若为预构建项目，清理原生缓存：
  • iOS：进入ios目录执行pod deintegrate && pod install
  • Android：进入android目录执行./gradlew clean

4. 修正Babel插件顺序 #

确保react-native-reanimated/plugin放在babel配置的最后一位（插件顺序影响执行逻辑）：

module.exports = function (api) {
    api.cache(true);
    return {
        presets: ['babel-preset-expo'],
        plugins: [
            // 其他插件置于此处
            'react-native-reanimated/plugin', // 必须放在最后
        ],
    };
};

5. 重新构建原生项目（预构建场景） #

若使用expo prebuild生成了原生代码，需重新构建：

npx expo prebuild --clean
npx expo start --clear

额外排查 #

• 确认react-native-draggable-flatlist@4.0.1与你最终安装的Reanimated版本兼容，若不兼容可尝试降级该组件版本。
• 更新Expo CLI到最新版本：

npm install -g expo-cli@latest

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