不变违规：尝试注册两个同名的视图 RNCSafeAreaProvider，js 引擎：hermes

Question

当尝试从“react-native-gifted-chat”导入和使用 GiftedChat 组件时，我收到此错误：

Invariant Violation: Tried to register two views with the same name RNCSafeAreaProvider, js engine: hermes

我已经尝试过这里列出的几件事。人们似乎对与“react-native-safe-area-context”相关的其他软件包也有类似的问题。

• 我已经更新了“react-native-safe-area-context”（本文发布时为 4.2.5）
• 卸载了“react-native-safe-area-context”
  • rm 节点模块
  • rm -rf ios/Pods && ios/Podfile.lock
  • rm package-lock.json
  • npm 安装
  • 重新安装 pods -> npx pod-install
  • 再次build项目还是同样的错误

我没有使用 expo，但我使用的是 React Native CLI。

在我看来，问题出在“react-native-gifted-chat”上。

细节：

• “反应本机”：“0.66.4”
• “反应本机安全区域上下文”：“^3.1.9”
• “react-native-gifted-chat”：“^1.0.0”

如果有人有任何想法或见解，我将不胜感激。如果我找到解决方案，我会将其作为评论发布。

Answer 1

根据这篇文章，该错误意味着相同的扩展被安装了多次。

\n

检查了使用“react-native-safe-area-view”的位置

\n

npm list react-native-safe-area-context

\n

结果：

\n

\xe2\x94\x9c\xe2\x94\x80\xe2\x94\xac @react-navigation/bottom-tabs@6.3.1\n\xe2\x94\x82 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\xac @react-navigation/elements@1.3.3\n\xe2\x94\x82 \xe2\x94\x82 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 react-native-safe-area-context@3.1.9 deduped\n\xe2\x94\x82 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 react-native-safe-area-context@3.1.9 deduped\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\xac @react-navigation/stack@6.2.1\n\xe2\x94\x82 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 react-native-safe-area-context@3.1.9 deduped\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\xac react-native-gifted-chat@1.0.0\n\xe2\x94\x82 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 react-native-safe-area-context@4.2.4\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 react-native-safe-area-context@3.1.9\n

\n

似乎有天赋的聊天正在引入 4.2.4 和 3.1.9

\n

将“react-native-safe-area-context”更新到最新版本（4.2.5）

\n

跑npm dedupe

\n

“react-native-gifted-chat”似乎仍在引入两个版本

\n

\xe2\x94\x9c\xe2\x94\x80\xe2\x94\xac @react-navigation/bottom-tabs@6.3.1\n\xe2\x94\x82 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\xac @react-navigation/elements@1.3.3\n\xe2\x94\x82 \xe2\x94\x82 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 react-native-safe-area-context@4.2.5 deduped\n\xe2\x94\x82 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 react-native-safe-area-context@4.2.5 deduped\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\xac @react-navigation/stack@6.2.1\n\xe2\x94\x82 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 react-native-safe-area-context@4.2.5 deduped\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\xac react-native-gifted-chat@1.0.0\n\xe2\x94\x82 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 react-native-safe-area-context@4.2.4\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 react-native-safe-area-context@4.2.5\n

\n

这看起来很奇怪，所以我检查了 node_modules 中的包本身node_modules/node_modules/react-native-gifted-chat/package.json，发现依赖项专门请求 4.2.4

\n

  "dependencies": {\n    "@expo/react-native-action-sheet": "3.13.0",\n    "dayjs": "1.8.26",\n    "prop-types": "15.7.2",\n    "react-native-communications": "2.2.1",\n    "react-native-iphone-x-helper": "1.3.1",\n    "react-native-lightbox-v2": "0.9.0",\n    "react-native-parsed-text": "0.0.22",\n    --> "react-native-safe-area-context": "4.2.4", <--\n    "react-native-typing-animation": "0.1.7",\n    "use-memo-one": "1.1.1",\n    "uuid": "3.4.0"\n  },\n

\n

他们不要求 ^4.2.4，而是特别要求版本 4.2.4

\n\n

附注：\n ^字符定义了可接受的版本范围，其中包括从指定版本到（但不包括）下一个版本的所有补丁和次要版本。所以“^1.2.3”可以近似展开为“">=1.2.3 <2.0.0”。

\n\n

这是什么意思？

\n

我安装了“react-native-gifted-chat”所需的版本，它将与所有其他依赖项一起使用，然后检查它是否最终被重复数据删除。

\n

npm install react-native-safe-area-context@4.2.4

\n

npm list react-native-safe-area-context

\n

终于删除了重复数据

\n

\xe2\x94\x9c\xe2\x94\x80\xe2\x94\xac @react-navigation/bottom-tabs@6.3.1\n\xe2\x94\x82 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\xac @react-navigation/elements@1.3.3\n\xe2\x94\x82 \xe2\x94\x82 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 react-native-safe-area-context@4.2.4 deduped\n\xe2\x94\x82 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 react-native-safe-area-context@4.2.4 deduped\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\xac @react-navigation/stack@6.2.1\n\xe2\x94\x82 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 react-native-safe-area-context@4.2.4 deduped\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\xac react-native-gifted-chat@1.0.0\n\xe2\x94\x82 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 react-native-safe-area-context@4.2.4 deduped\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 react-native-safe-area-context@4.2.4\n

\n

错误已修复。

\n

不要忘记重新安装你的 Pod。

\n\n

长话短说

\n

\n
• “react-native-gifted-chat”没有正确编写他们的package.json。
\n
• 他们特别需要“react-native-safe-area-context”版本 4.2.4
\n
• 他们应该需要版本 ^4.2.4 (>=4.2.4 < 5.0.0)
\n
• 安装此特定版本可以解决该问题，因为没有使用两个版本的软件包。npm install react-native-safe-area-context@4.2.4
\n
• 或者可以为“react-native-gifted-chat”打一个补丁，使修复刚刚列出
\n
• 不要忘记重新安装你的 Pod 和所有爵士乐
\n

\n\n