React Native集成导航后因CMake与Ninja构建失败如何解决？

问题概述 #

项目初始可正常运行，安装 react-native-navigation 及其依赖后，出现 react-native-reanimated 相关的 C++ 构建失败，报错信息如下：

C++ build system [build] failed while executing:
@echo off
"C:\Users\MarksmenX\AppData\Local\Android\Sdk\cmake\3.22.1\bin\ninja.exe" 
^-C ^
"C:\react_native_apps\atlasv101\atlas\node_modules\react-native-reanimated\android\.cxx\Debug\e6b4c1t2\arm64-v8a" ^reanimated from C:\react_native_apps\atlasv101\atlas\node_modules\react-native-reanimated\android

已安装 CMake 和 Ninja 并配置环境变量，但问题未解决。

解决方案 #

1. 校验版本兼容性 #

react-native-navigation、react-native-reanimated 与 React Native 版本必须严格匹配：

• 查看项目 package.json 中各依赖版本，对照官方兼容性说明调整（例如 React Native 0.7x 需搭配 reanimated 3.x 系列，react-native-navigation 需支持对应 RN 版本）
• 若版本不兼容，执行升级/降级操作，示例：

  npm install react-native-reanimated@3.3.0 --save
  npm install react-native-navigation@7.29.0 --save
  

2. 清理全链路缓存 #

• 清理 Android 构建缓存：

  cd android
  gradlew clean
  

• 清理 Node 依赖与缓存：

  rmdir /s node_modules
  del package-lock.json yarn.lock
  npm install
  

• 重置 Metro 缓存：

  npx react-native start --reset-cache
  

3. 确认环境变量生效 #

• 验证 CMake 和 Ninja 可全局调用：

  cmake --version
  ninja --version
  

• 若命令无法执行，检查系统 PATH 变量是否包含以下路径：
  • CMake 路径：C:\Users\MarksmenX\AppData\Local\Android\Sdk\cmake\3.22.1\bin
  • Ninja 路径（通常随 CMake 自带，若单独安装需添加对应 bin 目录）
• 配置完成后重启终端/IDE，确保环境变量生效。

4. 检查 react-native-reanimated 配置 #

• 确认 android/settings.gradle 包含 reanimated 项目：

  include ':react-native-reanimated'
  project(':react-native-reanimated').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-reanimated/android')
  

• 确认 android/app/build.gradle 依赖中包含 reanimated：

  dependencies {
      // ...
      implementation project(':react-native-reanimated')
  }
  

• 检查 MainApplication.java/MainApplication.kt 中注册了 Reanimated Package：
  • Java：

    import com.swmansion.reanimated.ReanimatedPackage;
    // ...
    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.asList(
          new MainReactPackage(),
          new ReanimatedPackage() // 添加此行
      );
    }
    

  • Kotlin：

    import com.swmansion.reanimated.ReanimatedPackage
    // ...
    override fun getPackages(): List<ReactPackage> {
        return listOf(
            MainReactPackage(),
            ReanimatedPackage() // 添加此行
        )
    }
    

5. 指定 CMake 版本与架构支持 #

• 在 android/app/build.gradle 中明确指定 CMake 版本：

  android {
      defaultConfig {
          // ...
          externalNativeBuild {
              cmake {
                  version "3.22.1" // 与本地安装版本一致
              }
          }
      }
  }
  

• 添加模拟器架构支持（适配 x86_64 或 arm64-v8a）：

  android {
      splits {
          abi {
              enable true
              reset()
              include 'x86_64', 'arm64-v8a'
              universalApk false
          }
      }
  }
  

6. 更新 Gradle 插件版本 #

若旧版 Gradle 与 CMake 不兼容，在 android/build.gradle 中更新插件：

buildscript {
    dependencies {
        classpath("com.android.tools.build:gradle:7.4.2") // 适配 RN 0.7x 版本
    }
}

7. 重新构建项目 #

完成上述操作后，执行：

npx react-native run-android

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