配置React Navigation后React Native Android构建失败求助

解决方案 #

1. 升级react-native-safe-area-context到兼容RN 0.76的版本
   执行命令安装最新稳定版：

   pnpm install react-native-safe-area-context@latest
   

2. 清理所有缓存并重新构建

   • 清理Android构建缓存：

     cd android && ./gradlew clean && cd ..
     

   • 清理依赖缓存并重新安装：

     rm -rf node_modules pnpm-lock.yaml
     pnpm install
     

   • 重置Metro缓存：

     pnpm start --reset-cache
     

   • 重新构建Android项目：

     pnpm run android
     

问题背景 #

使用pnpm dlx @react-native-community/cli init创建React Native 0.76.0裸项目，初始运行正常。配置React Navigation后，Android端构建失败，CMake报错核心为找不到react/renderer/components/view/ViewEventEmitter.h文件。

错误日志片段 #

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:buildCMakeDebug[arm64-v8a]'.
> com.android.ide.common.process.ProcessException: ninja: Entering directory `/home/mint/code/playground/fuckmeApp/android/app/.cxx/Debug/m6b591d4/arm64-v8a'
  [0/2] Re-checking globbed directories...
  [1/22] Building CXX object safeareacontext_autolinked_build/CMakeFiles/react_codegen_safeareacontext.dir/home/mint/code/playground/fuckmeApp/node_modules/react-native-safe-area-context/android/build/generated/source/codegen/jni/react/renderer/components/safeareacontext/EventEmitters.cpp.o
  FAILED: safeareacontext_autolinked_build/CMakeFiles/react_codegen_safeareacontext.dir/home/mint/code/playground/fuckmeApp/node_modules/react-native-safe-area-context/android/build/generated/source/codegen/jni/react/renderer/components/safeareacontext/EventEmitters.cpp.o 
  /home/mint/Android/Sdk/ndk/26.1.10909125/toolchains/llvm/prebuilt/linux-x86_64/bin/clang++ --target=aarch64-none-linux-android24 --sysroot=/home/mint/Android/Sdk/ndk/26.1.10909125/toolchains/llvm/prebuilt/linux-x86_64/sysroot -Dreact_codegen_safeareacontext_EXPORTS -I/home/mint/code/playground/fuckmeApp/node_modules/react-native-safe-area-context/android/src/main/jni/. -I/home/mint/code/playground/fuckmeApp/node_modules/react-native-safe-area-context/android/src/main/jni/../../../../common/cpp -I/home/mint/code/playground/fuckmeApp/node_modules/react-native-safe-area-context/android/src/main/jni/../../../build/generated/source/codegen/jni -I/home/mint/code/playground/fuckmeApp/node_modules/react-native-safe-area-context/android/src/main/jni/../../../build/generated/source/codegen/jni/react/renderer/components/safeareacontext -isystem /home/mint/.gradle/caches/8.10.2/transforms/eb4b98dea289284ca2b26e9265bd49ab/transformed/fbjni-0.6.0/prefab/modules/fbjni/include -isystem /home/mint/.gradle/caches/8.10.2/transforms/2fa3c78e855de2c4ef8aa6911c4216a0/transformed/react-android-0.76.0-debug/prefab/modules/jsi/include -g -DANDROID -fdata-sections -ffunction-sections -funwind-tables -fstack-protector-strong -no-canonical-prefixes -D_FORTIFY_SOURCE=2 -Wformat -Werror=format-security   -fno-limit-debug-info  -fPIC -fexceptions -frtti -std=c++20 -Wall -Wpedantic -Wno-gnu-zero-variadic-macro-arguments -DLOG_TAG="ReactNative" -DFOLLY_NO_CONFIG=1 -DFOLLY_HAVE_CLOCK_GETTIME=1 -DFOLLY_USE_LIBCPP=1 -DFOLLY_CFG_NO_COROUTINES=1 -DFOLLY_MOBILE=1 -DFOLLY_HAVE_RECVMMSG=1 -DFOLLY_HAVE_PTHREAD=1 -DFOLLY_HAVE_XSI_STRERROR_R=1 -MD -MT safeareacontext_autolinked_build/CMakeFiles/react_codegen_safeareacontext.dir/home/mint/code/playground/fuckmeApp/node_modules/react-native-safe-area-context/android/build/generated/source/codegen/jni/react/renderer/components/safeareacontext/EventEmitters.cpp.o -MF safeareacontext_autolinked_build/CMakeFiles/react_codegen_safeareacontext.dir/home/mint/code/playground/fuckmeApp/node_modules/react-native-safe-area-context/android/build/generated/source/codegen/jni/react/renderer/components/safeareacontext/EventEmitters.cpp.o.d -o safeareacontext_autolinked_build/CMakeFiles/react_codegen_safeareacontext.dir/home/mint/code/playground/fuckmeApp/node_modules/react-native-safe-area-context/android/build/generated/source/codegen/jni/react/renderer/components/safeareacontext/EventEmitters.cpp.o -c /home/mint/code/playground/fuckmeApp/node_modules/react-native-safe-area-context/android/build/generated/source/codegen/jni/react/renderer/components/safeareacontext/EventEmitters.cpp
  In file included from /home/mint/code/playground/fuckmeApp/node_modules/react-native-safe-area-context/android/build/generated/source/codegen/jni/react/renderer/components/safeareacontext/EventEmitters.cpp:11:
  /home/mint/code/playground/fuckmeApp/node_modules/react-native-safe-area-context/android/src/main/jni/../../../build/generated/source/codegen/jni/react/renderer/components/safeareacontext/EventEmitters.h:12:10: fatal error: 'react/renderer/components/view/ViewEventEmitter.h' file not found
  #include <react/renderer/components/view/ViewEventEmitter.h>
           ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  1 error generated.

App.tsx代码 #

import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import Home from './src/Home';
import About from './src/About';

const Stack = createNativeStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="About" component={About} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

项目依赖配置 #

{
      "name": "appname",
      "version": "0.0.1",
      "dependencies": {
        "react": "18.3.1",
        "react-native": "0.76.0"
      },
      "devDependencies": {
        "@babel/core": "^7.25.2",
        "@babel/preset-env": "^7.25.3",
        "@babel/runtime": "^7.25.0",
        "@react-native-community/cli": "15.0.0-alpha.2",
        "@react-native-community/cli-platform-android": "15.0.0-alpha.2",
        "@react-native-community/cli-platform-ios": "15.0.0-alpha.2",
        "@react-native/babel-preset": "0.76.0",
        "@react-native/eslint-config": "0.76.0",
        "@react-native/metro-config": "0.76.0",
        "@react-native/typescript-config": "0.76.0",
        "@types/react": "^18.2.6",
        "@types/react-test-renderer": "^18.0.0",
        "babel-jest": "^29.6.3",
        "eslint": "^8.19.0",
        "jest": "^29.6.3",
        "prettier": "2.8.8",
        "react-test-renderer": "18.3.1",
        "typescript": "5.0.4"
      },
      "engines": {
        "node": ">=18"
      }
    }

环境信息 #

• OS: Linux Mint 21.3 Cinnamon
• Android SDK 目标版本: 15

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