React Navigation报错：RNSScreenStackHeaderConfig未在UIManager中找到

错误信息：
ERROR Invariant Violation: requireNativeComponent: "RNSScreenStackHeaderConfig" was not found in the UIManager.

This error is located at:
    in RNSScreenStackHeaderConfig (at HeaderConfig.tsx:164)
    in HeaderConfig (at NativeStackView.native.tsx:280)
    in RNSScreen (at createAnimatedComponent.js:211)
    in AnimatedComponent (at createAnimatedComponent.js:264)
    in AnimatedComponentWrapper (at src/index.native.tsx:257)
    in MaybeFreeze (at src/index.native.tsx:256)
    in Screen (at NativeStackView.native.tsx:214)
    in SceneView (at NativeStackView.native.tsx:342)
    in RNSScreenStack (at src/index.native.tsx:188)
    in ScreenStack (at NativeStackView.native.tsx:331)
    in NativeStackViewInner (at NativeStackView.native.tsx:388)
    in RNCSafeAreaProvider (at SafeAreaContext.tsx:87)
    in SafeAreaProvider (at SafeAreaProviderCompat.tsx:46)
    in SafeAreaProviderCompat (at NativeStackView.native.tsx:387)
    in NativeStackView (at createNativeStackNavigator.tsx:72)
    in Unknown (at createNativeStackNavigator.tsx:71)
    in NativeStackNavigator (at App.js:21)
    in EnsureSingleNavigator (at BaseNavigationContainer.tsx:430)
    in BaseNavigationContainer (at NavigationContainer.tsx:132)
    in ThemeProvider (at NavigationContainer.tsx:131)
    in NavigationContainerInner (at App.js:20)
    in App (at renderApplication.js:50)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:92)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:119)
    in AppContainer (at renderApplication.js:43)
    in Bayda9(RootComponent) (at renderApplication.js:60)

错误原因 #

这个问题是因为React Navigation的Native Stack依赖react-native-screens和react-native-safe-area-context两个原生模块，要么未安装，要么原生端配置不完整，导致UIManager找不到对应的原生组件。

解决方案 #

• 步骤1：安装依赖
  在项目根目录执行命令：

  npm install @react-navigation/native react-native-screens react-native-safe-area-context
  # 或使用yarn
  yarn add @react-navigation/native react-native-screens react-native-safe-area-context
  

• 步骤2：处理iOS原生依赖
  进入iOS目录安装Pods：

  cd ios && pod install && cd ..
  

• 步骤3：处理Android原生配置
  打开android/app/src/main/java/[你的包名]/MainActivity.java，添加以下代码：

  import android.os.Bundle;
  
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(null);
  }
  

  之后同步Gradle或直接重新构建项目。

• 步骤4：清理缓存并重启项目
  先清理缓存：

  npx react-native start --reset-cache
  

  再重新运行项目：

  # iOS
  npx react-native run-ios
  # Android
  npx react-native run-android
  

• 额外检查（针对RN < 0.60版本）
  如果你的React Native版本低于0.60，需要手动链接模块：

  npx react-native link react-native-screens
  npx react-native link react-native-safe-area-context
  

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