不变违规：requireNativeComponent：在 UIManager 中找不到“RNSScreen”

Question

尽管我已经安装了所有相关的软件包并遵循了 react-navigation 指南（https://reactnavigation.org/docs/getting-started#installation），但我还是收到了 RNSScreen 错误，但没有任何效果对我有用。

Answer 1

当您安装所有软件包以添加导航而不终止正在运行的构建时，通常会发生这种情况。确保停止（ android 或 IOS ）正在运行的进程，然后在安装它们并添加路由组件后再次运行它

Answer 2

这个解决方案（来源）总是适合我，这是确切的解决方案：

太长了；当您安装软件包以添加导航而不终止应用程序的运行构建时，就会发生这种情况。

一步步：

如果您遇到此错误

不变违规：requireNativeComponent：在 UIManager 中找不到“RNSScreen”。

按着这些次序：

1. 确保您的 package.json 文件中是否有以下软件包：

• @react-native-community/masked-view
• @react-navigation/native
• @react-navigation/堆栈
• 反应本机手势处理程序
• 反应本机复活
• 反应本机安全区域上下文
• 反应本机屏幕

cd ios2. 接下来，通过确保--> pod install-->确保 pod 是否是最新的（仅适用于 iOS）cd ..

3. 最后按 Ctrl+C（两次/三次）取消当前构建，然后执行npx react-native run-ios

Answer 3

在实现导航时遇到了同样的问题。运行以下命令

npm install @react-navigation/native

React Navigation 由一些核心实用程序组成，然后导航器使用这些实用程序在您的应用程序中创建导航结构。

在您的项目目录中，运行：

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

这将安装这些库的兼容版本。

如果您使用的是 Mac 并针对 iOS 进行开发，则需要安装 Pod 以完成链接。

npx pod-install ios

现在跑？

react-native run-ios

Answer 4

RNSSCreens 错误，因为您的项目上未安装react-native-screens

只需运行npm install react-native-screens react-native-safe-area-context或者如果您使用纱线运行'yarn add install react-native-screens react-native-safe-area-context'

Answer 5

关闭 Metro 并运行npx run android以重建代码

Answer 6

我认为您缺少安装react-native-screens组件。这是安装反应导航指南的必需部分。

pod install从 npm 安装包后不要忘记在 ios 文件夹中运行。

Answer 7

停止所有终端服务器，然后运行

npx react-native run-android

如果还是不行

npm i react-native-screens

进而

npx react-native run-android

Answer 8

我在iOS和Android上都发生过这种情况。我通过更新软件包设法让 Android 再次工作：

"react-native-screens": "^3.18.1"

然后将其添加到依赖项中：android/app/build.gradle

implementation project(':react-native-screens')

然后将其添加到受保护的列表 getPackages()中：android/app/src/main/java/com/myapp/MainApplication.java

@Override
protected List<ReactPackage> getPackages() {
  @SuppressWarnings("UnnecessaryLocalVariable")
  List<ReactPackage> packages = new PackageList(this).getPackages();
  packages.add(new com.swmansion.rnscreens.RNScreensPackage());
  return packages;
}

注意：确保您还没有导入，com.swmansion.rnscreens否则应用程序将由于重复的屏幕视图而不断重新启动

然后最后将其添加到android/settings.gradle

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

确保在运行应用程序之前清理 gradle，例如导航到 android 文件夹并运行：

./gradlew clean

对于 iOS，只需将其添加到目标“myapp”中即可：ios/Podfile

pod 'RNScreens', :path => '../node_modules/react-native-screens'

在运行应用程序之前，请确保删除Podfile.lock并在 iOS 文件夹中运行。pod install --repo-update

Answer 9

终于找到了解决方案，首先创建新项目，然后重新设置react-google-maps库。

解决方案：创建新项目，从头开始安装所有依赖项，遵循反应本机屏幕的分步安装指南，最后将所有代码文件移动到新创建的项目中。这对我有用：D

在深入研究项目代码并将项目代码与新生成的代码进行比较之后，以下是我的发现：

实际问题：我们不久前集成了react-native-google-maps库，为此我和其他开发人员遵循分步指南并对MainActivity.javaandroid文件夹中的文件进行了更改。由于RNSScreen出现了一些配置错误，因此引发了问题。

实际解决方案完全删除了react-native-google-maps（卸载了npm软件包）并删除了Google Maps配置，并再次设置了react-google-maps库

总之，如果任何开发人员尝试在 React Native 中设置 google 地图，请检查 React Native 和 React-native-google-maps 库的版本，然后仔细按照步骤操作。

希望这能回答您的疑问。