requireNativeComponent：运行android应用程序时在UIManager中找不到“RNSScreenStackHeaderConfig”

Posted 2023-05-07

【中文标题】requireNativeComponent：运行android应用程序时在UIManager中找不到“RNSScreenStackHeaderConfig”

【英文标题】：requireNativeComponent: "RNSScreenStackHeaderConfig" was not found in the UIManager when running android app

【发布时间】：2021-11-01 17:30:18

【问题描述】：

在 android 上运行应用程序时出现此错误。它构建正确，但异常崩溃。我已经安装了 React-native-screens、@React-native/navigation 和 https://reactnavigation.org/docs/getting-started/ 上列出的依赖项

com.facebook.react.common.javascriptException: Invariant Violation: requireNativeComponent: "RNSScreenStackHeaderConfig" 在 UIManager 中找不到。

This error is located at:
    in RNSScreenStackHeaderConfig
    in Unknown
    in RNSScreen
    in N
    in ForwardRef
    in y
    in E
    in RNSScreenStack
    in w
    in RNCSafeAreaProvider
    in Unknown
    in v
    in Unknown
    in Unknown
    in Unknown
    in ForwardRef
    in Unknown
    in ForwardRef
    in p
    in c
    in P
    in RCTView
    in View
    in RCTView
    in View
    in h, stack:

它在 ios 上构建和运行良好，但在 android 上运行时完全崩溃。这里有什么我忽略的吗？

这是我的包 json。

  "name": "<myprojectname>",
  "version": "0.0.1",
  "private": true,
  "scripts": 
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint .",
    "postinstall": "npx jetify",
    "android:bundle:debug": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/"
  ,
  "dependencies": 
    "@react-native-community/async-storage": "^1.8.1",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-navigation/native": "^6.0.2",
    "@react-navigation/native-stack": "^6.1.0",
    "@react-navigation/stack": "^6.0.7",
    "adbkit": "^2.11.1",
    "moment": "^2.24.0",
    "react": "16.9.0",
    "react-native": "0.63.0",
    "react-native-calendar-strip": "^1.4.1",
    "react-native-calendars": "^1.264.0",
    "react-native-firebase": "^5.6.0",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-reanimated": "^2.2.0",
    "react-native-safe-area-context": "^3.3.1",
    "react-native-screens": "3.1.1",
    "react-native-snap-carousel": "^3.8.4",
    "react-native-vector-icons": "^6.6.0",
    "react-navigation": "^4.4.4",
    "react-navigation-stack": "^2.10.4",
    "react-redux": "^7.2.0",
    "redux": "^4.0.5"
  ,
  "devDependencies": 
    "@babel/core": "^7.15.0",
    "babel-jest": "24.9.0",
    "eslint": "^6.5.1",
    "jest": "24.9.0",
    "jetifier": "^1.6.5",
    "metro-react-native-babel-preset": "^0.66.2",
    "react-test-renderer": "16.9.0"
  ,
  "jest": 
    "preset": "react-native"
  

我真的不知道如何解决这个问题，尝试过删除缓存、重新启动 Metro、删除节点模块和所有“相关”错误。当我创建一个新项目并尝试安装和使用导航库时，甚至会发生此错误。

这是我的入口点，示例复制自 React-navigation 小吃。

import * as React from 'react';
import  View, Text  from 'react-native';
import  NavigationContainer  from '@react-navigation/native';
import  createNativeStackNavigator  from '@react-navigation/native-stack';
import  enableScreens  from 'react-native-screens';

enableScreens(true);
function HomeScreen() 
  return (
    <View style= flex: 1, alignItems: 'center', justifyContent: 'center' >
      <Text>Home Screen</Text>
    </View>
  );


function DetailsScreen() 
  return (
    <View style= flex: 1, alignItems: 'center', justifyContent: 'center' >
      <Text>Details Screen</Text>
    </View>
  );


const Stack = createNativeStackNavigator();

function AppTest() 
  return (
    <NavigationContainer>
      <Stack.Navigator 
      screenOptions=
        headerStyle: 
          backgroundColor: '#f4511e',
        ,
        headerTintColor: '#fff',
        headerTitleStyle: 
          fontWeight: 'bold',
        ,
      
      initialRouteName="Home">
        <Stack.Screen  options= title: 'My home'  name="Home" component=HomeScreen />
        <Stack.Screen  options= title: 'My home'  name="Details" component=DetailsScreen />
      </Stack.Navigator>
    </NavigationContainer>
  );


export default AppTest;

有什么建议吗？

【问题讨论】：

您找到解决方案了吗？我得到了同样的错误，我尝试了所有的答案，但没有奏效。

【参考方案1】：

我在导航工作期间在 ios 上遇到了这个问题。

我不确定究竟是什么解决了这个问题。我重新安装了所有导航包并运行npx pod-install，清理了metro缓存，构建数据，派生数据，错误消失了。

【参考方案2】：

我在编辑位于android/app/src/main/java/<your package name>/MainActivity.java 的MainActivity.java 文件时遇到了同样的问题 同时关注react-navigation-getting-started-guide

你需要停止 Metro-server

然后，运行react-native run-android

【参考方案3】：

我遇到了同样的问题，我刚刚通过 xCode 重新加载了我的模拟器并且它工作了。

【讨论】：

这实际上对我有用

这也适用于我。

【参考方案4】：

Mihir Panchal感谢您的回复，但我自己找到了解决方案。

解决方案。

我按照文档中的说明进行操作。没有任何不同。

我看到在这 3 个文件中导入了一些项目： settings.gradle、app/build.gradle 和 mainactivity.java 例如。

Settings.gradle：

include ':react-native-firebase'
project(':react-native-firebase').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-firebase/android')
include ':react-native-gesture-handler'
project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gesture-handler/android')
include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
include ':react-native-screens'
project(':react-native-screens').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-screens/android')
include ':react-native-reanimated'
project(':react-native-reanimated').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-reanimated/android')

include ':react-native-gesture-handler'
project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gesture-handler/android')
include (':react-native-safe-area-context')
project(':react-native-safe-area-context').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-safe-area-context/android')
include ':app'

...

app/build.gradle

  implementation project(':react-native-screens')
    implementation project(':react-native-reanimated')
    implementation project(':react-native-gesture-handler')
    implementation project(':react-native-safe-area-context')

最后在我的 mainApplication.java 中

  @Override
    protected List<ReactPackage> getPackages() 
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
            new AsyncStoragePackage(),
            new RNFirebasePackage(),
            new RNFirebaseFirestorePackage(),
            new RNFirebaseLinksPackage(),
            new RNFirebaseAuthPackage(),
            new ReanimatedPackage(),
            new RNGestureHandlerPackage(),
            new RNScreensPackage(),
            new SafeAreaContextPackage()
      );
    

要使库正常工作并设置所有内容，必须在此处链接。 不知道这是否对任何人有帮助，但我被困了一段时间，这样做使应用程序按预期工作。如果你没有经验可能很容易错过（我对 RN 不是很有经验）

【讨论】：

这不是解决方案，如何处理这些信息？

【参考方案5】：

杀死 Metro 并清理 gradle 构建（可能需要一两分钟）：

cd android
.\gradlew clean

启动 Metro 并清除缓存：

npm start --reset-cache

重新编译

npm run android

---

另外，请确保您在MainActivity.java 中添加了import android.os.Bundle; 下方package com.your_package_name。 https://reactnavigation.org/docs/getting-started/ 上的描述对于某些人可能会建议将其放在此文件的最顶部，但这是错误的想法。它应该是这样的：

package com.your_package_name;
import android.os.Bundle;

【参考方案6】：

您是否进行了文档中给出的更改？ 按照这个https://reactnavigation.org/docs/getting-started/ 您需要在位于android/app/src/main/java/<your package name>/MainActivity.java 的MainActivity.java 中进行更改

在文件的开头添加这个import android.os.Bundle;

然后添加@Override protected void onCreate(Bundle savedInstanceState) super.onCreate(null);

再次浏览文档

【参考方案7】：

在“settings.gradle”中添加

include ':react-native-screens'
project(':react-native-screens').projectDir = new 
File(rootProject.projectDir, '../node_modules/react-native- 
screens/android')
include ':react-native-reanimated'
project(':react-native-reanimated').projectDir = new 
File(rootProject.projectDir, '../node_modules/react-native- 
reanimated/android')
include ':react-native-gesture-handler'
project(':react-native-gesture-handler').projectDir = new 
File(rootProject.projectDir, '../node_modules/react-native-gesture- 
handler/android')
include (':react-native-safe-area-context')
project(':react-native-safe-area-context').projectDir = new 
File(rootProject.projectDir, '../node_modules/react-native-safe-area- 
context/android')
include ':app'

add in "app/build.gradle" 

implementation project(':react-native-screens')
implementation project(':react-native-reanimated')
implementation project(':react-native-gesture-handler')
implementation project(':react-native-safe-area-context')

Just Making above only 2 changes  your project will work fine. 
Thanks.... 

【参考方案8】：

您只需要确保在安装堆栈后安装依赖项 在 Windows 上运行此代码：

npm install react-native-screens react-native-safe-area-context

【参考方案9】：

警告：我知道这篇文章是针对 android 的，但在与同事讨论这个问题后，我想知道安装可可豆荚是否存在问题。

希望你们一切都好！我也有这个，想添加对我有用的东西。我正在与我的第一个 gig outta bootcamp 一起做一个 RN 项目，所以我对这些构建也很陌生。但是，据我了解，无论何时运行 pod install，您都需要从 xcode 运行项目，以便将 pod 与 node_modules 链接起来。

为此，您需要：

运行 xcode 转到有问题的项目文件夹 进入ios文件夹 打开<project_name>.xcworkspace 单击左上角的播放按钮来构建项目（如果您选择了模拟器，它应该在构建后打开应用程序）

完成这些步骤后，我不再收到该错误消息。

【讨论】：

注意，同事提到：“任何时候你看到“在 UIManager 中找不到”从 xcode 运行项目”。

【参考方案10】：

更改 settings.gradle 和 app/build.gradle 是不够的。需要对MainApplication.java 进行以下更改：

    List<ReactPackage> packages = new PackageList(this).getPackages();
    // Packages that cannot be autolinked yet can be added manually here, for example:
    // packages.add(new MyReactNativePackage());
    packages.add(new com.swmansion.reanimated.ReanimatedPackage());
    packages.add(new com.swmansion.gesturehandler.react.RNGestureHandlerPackage());
    packages.add(new com.swmansion.rnscreens.RNScreensPackage());
    packages.add(new com.th3rdwave.safeareacontext.SafeAreaContextPackage());

【参考方案11】：

解决方案在reactnavigation doc的文档中

安装@react-navigation/native后你必须安装两个依赖 npm install react-native-screens react-native-safe-area-context 提到图书馆。

注意： react-native-screens 软件包需要一个额外的配置步骤才能在 Android 设备上正常工作。编辑位于

的MainActivity.java文件

android/app/src/main/java/<your package name>/MainActivity.java.

将以下代码添加到 MainActivity 类的主体中：

@Override
protected void onCreate(Bundle savedInstanceState) 
  super.onCreate(null);

并确保在此文件顶部添加导入语句：

import android.os.Bundle;

【参考方案12】：

步骤：

停止你的地铁连接 重启你的应用

然后就可以了。

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【参考方案13】：

安装 react-native 屏幕应该可以解决问题。

yarn add react-native-screens

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。