堆栈内存溢出
  繁体   English   中英

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

[英]requireNativeComponent: "RNSScreenStackHeaderConfig" was not found in the UIManager when running android app

 原文  2021-09-03 10:55:53  8   32    javascript/ android/ reactjs/ react-native/ react-navigation

问题描述

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

com.facebook.react.common.JavascriptException：不变违规：requireNativeComponent：在 UIManager 中找不到“RNSScreenStackHeaderConfig”。

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 上运行时它完全崩溃。 我在这里忽略了什么吗？

这是我的 Package 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"
  }
}

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

这是我的入口点，从 React-navigation snack 复制的示例。

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;

有什么建议么？

32 个解决方案

解决方案1
 13  2021-09-16 09:27:24

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

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

解决方案2
 5  2021-10-03 06:17:00

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

你需要停止metro-server

然后，运行react-native run-android

解决方案3
 5  2021-11-16 09:42:03

我遇到了同样的问题，我只是通过 xCode 重新加载了我的模拟器，它就可以工作了。

解决方案4
 4  2022-02-22 10:18:51

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

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

解决方案5
 3  2021-09-06 09:46:56

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

解决方案。

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

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

设置.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'

...

应用程序/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 不是很有经验）

解决方案6
 3  2022-02-01 23:06:15

杀死 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;

解决方案7
 3  2022-02-13 11:38:49

解决方案在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;

解决方案8
 3  2022-03-20 12:41:34

如果有人在使用react-native-screens /nx mono react-native-safe-area-context repo 进行跨平台构建（移动和 Web）时遇到此问题，则需要在除了工作空间 package.json 之外的移动应用程序 package.json。

解决方案9
 2  2021-09-04 13:02:12

您是否进行了文档中给出的更改？ 根据此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); } @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(null); }

再次浏览文档

解决方案10
 1  2021-09-27 08:34:42

添加“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....

解决方案11
 1  2022-05-01 17:37:21

我在为 ios 设置导航后遇到了这个问题。 这是我找到的解决方案：

  1. 在终端中，运行npx pod-install ios ，因为如文档中所述，“如果您在 Mac 上并为 iOS 开发，则需要安装 pod（通过 Cocoapods）以完成链接。”
  2. 退出我的模拟器
  3. 终止并重新运行npx react-native start
  4. 终止并重新运行npx react-native run-ios

完成这些步骤后，应用程序再次成功运行。

解决方案12
 1  2022-12-14 09:13:04

在应用中安装react-native-screens和react-native-safe-area-context包来解决问题。

打开终端并执行以下命令

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

解决方案13
 0  2021-11-15 18:36:05

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

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

为此，您需要：

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

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

解决方案14
 0  2021-12-05 20:30:52

更改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());

解决方案15
 0  2022-04-08 06:49:33

我只是解决了这个问题，这个问题实际上是一个手动链接问题。

遵循以前的答案是不够的。

这是我的完整更改。

// 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')

//app/build.gradle

dependencies {
...
    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(){

    ...
    packages.add(new com.swmansion.rnscreens.RNScreensPackage());
    //My Metro told me that RNGestureHandlerPackage is created twice, hence I comment the line, and then everything works.
    // packages.add(new com.swmansion.gesturehandler.RNGestureHandlerPackage());
    packages.add(new com.th3rdwave.safeareacontext.SafeAreaContextPackage());
    packages.add(new com.swmansion.reanimated.ReanimatedPackage());

参考： https ://github.com/software-mansion/react-native-gesture-handler/issues/684

解决方案16
 0  2022-04-12 14:57:21

我面临同样的问题，所以你只需要从模拟器中关闭项目。 并重新运行。错误消失了

解决方案17
 0  2022-06-15 06:21:08

如果你正在使用@react-navigation/native-stack ，你也应该安装react-native-screens和react-native-safe-area-context 。 我相信你的错误是因为你没有安装 react-native-screens

解决方案18
 0  2022-06-27 19:18:36

我有同样的错误。 尝试这个。

如果你使用 ios

  1. cd ios 在您的根文件夹中
  2. 吊舱安装
  3. 光盘..
  4. 纱线或 npm ios。 再次构建。

如果你使用安卓

  • 在 mainactivity.java 文件中

  • 复制

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

    导入android.os.Bundle；

解决方案19
 0  2022-07-15 11:17:24

此错误是因为react-navigator的更新依赖项尚未捆绑到应用程序中。 在Android上，通过运行重新安装应用程序

react-native run-android

这个错误消失了。

解决方案20
 0  2022-07-16 17:50:14

我得到了同样的错误，最后我通过遵循解决方案取得了成功。

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

将这两个模块安装在根文件夹中，或者如果您使用微应用架构，也将其安装在您的示例文件夹中。 快乐编码！

解决方案21
 0  2022-08-25 04:49:24

尝试使用所有清除命令并重新启动metro，就可以了

解决方案22
 0  2022-09-04 15:35:55

npm 安装 react-native-screens

npm 安装 react-native-safe-area-context

通过 npm 安装上述 package。如果需要，请使用 --force 关键字安装。 我希望这能解决你的问题。

解决方案23
 0  2022-09-10 05:17:45

遵循这 4 个步骤。 我解决了同样的问题。 1)cd android 2).\gradlew clean 3)npm start --reset-cache 4)npm run android

解决方案24
 0  2022-09-22 17:32:15

如果即使安装 npm 后此问题仍然存在，请安装 react-native-screens react-native-safe-area-context：尝试

cd ios >> pod install 并再次尝试 react-native run-ios

解决方案25
 0  2022-09-23 07:56:38

使用以下命令： npm install react-native-screens react-native-safe-area-context

解决方案26
 0  2022-10-12 21:39:06

我昨天遇到了同样的问题，即使我已经安装了 react-native-screens 并且我通过运行以下命令解决了它

npm uninstall react-native-cli @react-native-community/cli --force

然后我做了这个命令

npm install react-native-cli @react-native-community/cli --force

之后我运行 npm run android 并且它有效

解决方案27
 0  2022-10-14 10:12:08

在“getMainComponentName”函数底部的 MainActivity.java 文件中添加此行

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

还进口

 import android.os.Bundle;

在 android/build.gradle 中添加这一行

ext{
...
  kotlinVersion = "1.4.10"
}

然后清理 gradlew 并运行项目

解决方案28
 0  2022-12-06 11:46:39

对于 android 模拟器，我以这种方式解决了它：1-关闭 metro 2-转到 android 并写入：.\gradlew clean delete already build app from emulator。 3- 运行 npx react-native run-android。

解决方案29
 0  2022-12-23 18:48:49

如果您在 Mac 上并为 iOS 开发，则需要安装 pod（通过 Cocoapods）以完成链接。

npx pod-install ios

这是在 react-navigation/native 文档中

[![在此处输入图片描述](https://i.stack.imgur.com/FJWrR.png)](https://i.stack.imgur.com/FJWrR.png)

解决方案30
 0  2023-01-14 16:48:45

由于 expo 链接，我遇到了同样的问题。 我浏览了这个文档并使用了自动链接。 可能对某人有帮助。

解决方案31
 0  2023-01-19 01:06:57

我正在使用 expo 并收到此错误。 所有软件包都已正常安装。 问题是我遇到了一个不同于 expo-go 的环境，因为我使用的是 dev-client。 如果您使用的是 dev-client，请删除构建文件，重新构建它，然后再次运行 dev-client。

这种方法对我有用

解决方案32
 -1  2022-01-07 20:39:43

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

yarn add react-native-screens

解决方案33
 -1  2022-02-27 10:22:59

脚步：

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

然后它将起作用。

解决方案34
 -1  2022-03-24 09:13:47

yarn add react-native-screens

或者

npm i react-native-screens

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 requireNativeComponent：在 UIManager 中找不到“RNSScreenStackHeaderConfig” 不变违规：requireNativeComponent：在 Android 的 UIManager 中找不到“RNSVGSvgViewAndroid” 在 UIManager 中找不到 requireNativeComponent 不变违规：不变违规：requireNativeComponent：在 UIManager 中找不到“RNCSafeAreaView”。 React-Native-SVG 错误：不变违规：requireNativeComponent：在 UIManager 中找不到“RNSVGGroup” 在 UIManager 中找不到 RNCSafeAreaView 在 UIManager 中找不到“RNCSafeAreaView” 当我想使用 React Navigation 时出现错误，错误：requireNativeComponent：在 UIManger 中找不到“RNSScreen” 错误：在 UIManager 中找不到“ARTShape” - React native 在Android上运行应用程序时出现问题
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM