【问题标题】:Invariant Violation: requireNativeComponent: "RNSScreen" was not found in the UIManager不变违规:requireNativeComponent:在 UIManager 中找不到“RNSScreen”
【发布时间】:2021-06-29 10:34:09
【问题描述】:

即使我已安装所有相关软件包并遵循 react-navigation 指南 (https://reactnavigation.org/docs/getting-started#installation),但我仍然收到 RNSScreen 错误,但对我没有任何帮助。

【问题讨论】:

  • 请将代码和数据添加为文本 (using code formatting),而不是图像。图片:A)不允许我们复制粘贴代码/错误/数据进行测试; B) 不允许根据代码/错误/数据内容进行搜索;和many more reasons。除了代码格式的文本之外,只有在图像添加了一些重要的东西,而不仅仅是文本代码/错误/数据传达的内容时,才应该使用图像。
  • 我的安卓版本只有这个问题。我已经完成了您上面的所有建议,但没有任何运气。请在此处查看我的问题的完整描述:stackoverflow.com/questions/70007180/…

标签: react-native react-navigation react-navigation-v5


【解决方案1】:

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

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

【讨论】:

  • npx pod-install iospod-install ios 有什么区别?
  • 就我而言,我运行的命令略有不同 pod-install iosnpx react-native run-ios
【解决方案2】:

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

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

【讨论】:

  • 我已经按照文档中的说明安装了它,但是没有用。有关更多信息,我使用的是 Windows 机器和 Android AVD Manager。
  • 如果你正在为 Android 构建,我认为你应该在安装包后运行 npx jetify
【解决方案3】:

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

npx react-native run-android

如果还是不行,

npm i react-native-screens

然后

npx react-native run-android

【讨论】:

    【解决方案4】:

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

    【讨论】:

      【解决方案5】:

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

      【讨论】:

      • 这对我有用!!谢谢。
      【解决方案6】:

      这个解决方案 (source) 总是对我有用,这里是确切的解决方案:

      如果您遇到此错误

      不变量违规:requireNativeComponent:未找到“RNSScreen” 在 UIManager 中。

      按照以下步骤操作:

      1。如果您有以下软件包,请确保在您的 `package.json` 文件中:

      • @react-native-community/masked-view
      • @react-navigation/native
      • @react-navigation/stack
      • react-native-gesture-handler
      • react-native-reanimated
      • react-native-safe-area-context
      • react-native-screens

      2。接下来通过确保cd ios --> pod install --> cd ..

      来确保您的 pod 是最新的(仅适用于 iOS)

      3。最后按 Ctrl+C(两次/三次)取消当前构建,然后执行npx react-native run-ios

      【讨论】:

        【解决方案7】:

        我遇到了同样的问题,已经解决了。

        您可以在Android Emulator(或设备)上关闭终端和应用程序,然后再次运行npm run androidreact-native run-android

        我认为他们可能有一些缓存并发生错误。

        希望你能解决这个问题。

        【讨论】:

          【解决方案8】:
          1. 关闭 Metro 和 IOS 模拟器。
          2. 确保你去你的 ios 文件夹运行pod install
          3. 重新打开您的模拟器

          这应该可以解决问题。我也用了好一阵子才弄明白

          【讨论】:

            【解决方案9】:

            您进入项目文件夹的 ios 文件夹并运行以下命令。

            吊舱安装

            然后运行模拟器。

            【讨论】:

              【解决方案10】:

              嘿,我也面临同样的问题。只需使用

              npm install react-native-screens
              

              .

              【讨论】:

                【解决方案11】:

                您必须安装 react-native-screens,我猜您已经安装了。所以,我只给你一个文档中可能不太清楚的问题。

                所以你可能只是在你的应用上安装 React Navigation。

                安装后,您需要重新启动应用程序。

                所以关闭你的应用程序,再次运行react-native run-iosreact-native run-android

                React navigation 安装一些原生模块。因此,正如我所提到的,您需要重新启动该应用程序。

                这在他们的文档中非常清楚。

                【讨论】:

                  【解决方案12】:

                  停止运行您的节点服务器并从 Xcode/Android Studio 或使用命令 react-native run-iosreact-native run-android 再次构建应用程序

                  【讨论】:

                    【解决方案13】:

                    如果您使用的是 android,则需要使用 npx run android 或 react-native run-android 进行重建 新安装的 apk 可以正常工作

                    【讨论】:

                      【解决方案14】:

                      这对我有帮助。安装这个包

                      npm i react-native-screens

                      并添加

                      import { enableScreens } from 'react-native-screens';
                      
                      enableScreens();
                      

                      【讨论】:

                      • 需要在哪个文件中添加这些行?
                      • App.js 中导入react-native-screens 并在return 语句之前添加enableScreens()。参考包(npmjs.com/package/react-native-screens
                      • 不,它也没有工作。再次遇到上述相同的错误。
                      • @upgoingstar 你解决了这个问题吗?我目前遇到同样的问题
                      • 使用 react-native 0.64.0@react-navigation/bottom-tabs 5.11.9 我刚刚重新启动了我的开发环境并构建了代码并且它工作了
                      【解决方案15】:

                      我也遇到了同样的问题。对于 Android,我从模拟器中卸载应用程序,然后再次构建应用程序。问题解决了。假设你已经安装了你需要的包。

                      【讨论】:

                      • 重新编译就够了,喜欢react-native run-android
                      【解决方案16】:

                      终于找到了解决方案,首先是创建新项目,其次是重新设置 react-google-maps 库。

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

                      在深入研究项目代码并将项目代码与新生成的代码进行比较后,我的发现如下:

                      实际问题:我们前段时间集成了 react-native-google-maps 库,为此我和其他开发人员遵循分步指南并在 MainActivity.java 文件中进行了更改在安卓文件夹中。有一些配置错误导致RNSScreen 问题被抛出。

                      实际解决方案完全删除 react-native-google-maps(卸载 npm 包)并删除 Google Maps 配置并再次设置 react-google-maps 库

                      总之,如果有开发者尝试在 react native 中设置谷歌地图,请检查 react native 和 react-native-google-maps 库的版本,然后仔细按照步骤操作。

                      希望这能回答您的疑问。

                      【讨论】:

                        【解决方案17】:

                        就我而言,以下代码块有所帮助!

                        npm install react-native-screens
                        npm run android/ ios
                        

                        【讨论】:

                          【解决方案18】:

                          (它对我有用..!)

                          对于 React-native 开发人员.. 有时,包的变化在 xcode 中没有反映,所以请按照以下步骤进行解决方案..

                          在 xcode 中打开项目 -> 清理 Buid 文件夹 -> (重建您的项目)在任何模拟器上运行并等待构建.. ->一旦构建您可以通过终端再次运行或通过xcode继续工作..

                          【讨论】:

                            【解决方案19】:

                            在我尝试了我在这个comment 中找到的内容并重新开始我的步骤之前,所有推荐的答案都不起作用:

                            • 删除node_modules目录
                            • 打开 Metro 并真正完全退出模拟器
                            • yarn 重新安装
                            • 通过npx react-native start启动地铁
                            • 通过npx pod-install ios 安装 pod
                            • 通过npx react-native run-ios再次运行模拟器

                            【讨论】:

                              【解决方案20】:

                              确保以下插件已安装并与 android & ios 链接?

                              npm install react-native-screens

                              如果未链接,则执行以下命令

                              react-native 链接 react-native-screens

                              成功链接android和ios后,android studio的“Sync Gradle”和ios的“pod install”

                              现在关闭终端并再次构建并运行应用程序

                              【讨论】:

                                【解决方案21】:

                                RNSSCreen 错误,因为您的项目中没有安装 react-native-screen

                                只需运行npm install react-native-screen react-native-safe-area-context

                                【讨论】:

                                  【解决方案22】:

                                  我在这个问题上工作了几天,这对我有用:

                                  在android\app\src\main\java(你的项目名)\MainApplication.java中

                                  添加到导入:

                                  import com.swmansion.rnscreens.RNScreensPackage;
                                  

                                  然后将新的 RNScreensPackage() 添加到 ReactPackage 列表中:

                                  @Override
                                      protected List<ReactPackage> getPackages() {       
                                        return Arrays.<ReactPackage>asList(
                                            new MainReactPackage(),  
                                              ...
                                              new RNScreensPackage()
                                        );
                                      }
                                  

                                  编辑:这是在我在这里尝试了所有其他方法之后。

                                  【讨论】:

                                    猜你喜欢
                                    • 2021-08-05
                                    • 2020-05-06
                                    • 2019-08-27
                                    • 2020-09-02
                                    • 1970-01-01
                                    • 1970-01-01
                                    • 1970-01-01
                                    • 1970-01-01
                                    • 1970-01-01
                                    相关资源
                                    最近更新 更多