升级React Native至0.65.0后触发react-native-reanimated的JetifyTransform报错

报错原因 #

该报错是react-native-reanimated版本与React Native 0.65.0版本不兼容、构建缓存残留或安卓端Gradle配置不匹配导致的。

解决方案 #

步骤1：安装适配版本的react-native-reanimated #

React Native 0.65.x兼容的react-native-reanimated版本范围为2.3.x ~ 2.10.x，先修改package.json中的依赖版本，示例：

"react-native-reanimated": "2.10.0"

修改完成后执行依赖安装命令：

• npm用户执行npm install
• yarn用户执行yarn install

步骤2：全量清理构建缓存 #

1. 删除项目根目录下的node_modules文件夹、package-lock.json（npm）或yarn.lock（yarn）文件
2. 进入安卓项目目录执行清理命令：
   • Mac/Linux执行：cd android && ./gradlew clean
   • Windows执行：cd android && gradlew clean
3. 删除安卓目录下的.gradle文件夹、app/build文件夹
4. 清理React Native全局缓存：npx react-native start --reset-cache

步骤3：检查安卓端配置 #

1. 打开android/app/build.gradle，确认Hermes开关配置正确：

project.ext.react = [
  enableHermes: true, // 你项目使用了Hermes引擎，此处必须设为true
]

2. 打开android/build.gradle，确认Android Gradle插件版本不低于4.2.2，示例配置：

dependencies {
  classpath("com.android.tools.build:gradle:4.2.2")
  // 其余原有配置保持不变
}

3. 打开android/gradle/wrapper/gradle-wrapper.properties，确认Gradle分发版本不低于7.0.2，示例配置：

distributionUrl=https\://services.gradle.org/distributions/gradle-7.0.2-all.zip

4. 打开android/app/src/main/java/[你的包名路径]/MainApplication.java，添加Reanimated的JSI模块注册代码：

import com.swmansion.reanimated.ReanimatedJSIModulePackage;
import java.util.Arrays;
import java.util.List;
import com.facebook.react.JSIModulePackage;
// 其余原有导入保持不变

public class MainApplication extends Application implements ReactApplication {
  // 原有配置保持不变
  private final ReactNativeHost mReactNativeHost =
      new ReactNativeHost(this) {
        // 原有配置保持不变
        @Override
        protected List<JSIModulePackage> getJSIModulePackages() {
          return Arrays.asList(new ReanimatedJSIModulePackage());
        }
      };
}

步骤4：重新构建项目 #

保持执行了缓存清理的metro服务运行，新开终端执行npx react-native run-android即可。

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