React本机:尝试注册两个同名为RNCMaskedView的视图

Question

我试图使用这个库https://www.npmjs.com/package/@react-native-masked-view/masked-view，我使用npm，当我进行导入并尝试运行我的应用程序时，返回一个错误:尝试注册两个相同名称的RNCMaskedView视图。

我已经尝试过这个问题的解决方案，但是没有帮助。

这是我的package.json：

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start --port 19003",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@react-native-async-storage/async-storage": "^1.13.2",
    "@react-native-community/datetimepicker": "3.0.0",
    "@react-native-community/masked-view": "^0.1.10",
    "@react-native-masked-view/masked-view": "^0.2.6",
    "@react-native-picker/picker": "^1.9.4",
    "@react-navigation/bottom-tabs": "^5.9.2",
    "@react-navigation/drawer": "^5.9.3",
    "@react-navigation/native": "^5.7.6",
    "@react-navigation/stack": "^5.9.3",
    "axios": "^0.21.1",
    "crypto-js": "^4.0.0",
    "eslint": "^7.12.1",
    "expo": "~39.0.2",
    "expo-crypto": "~8.3.0",
    "expo-document-picker": "~8.4.0",
    "expo-font": "~8.3.0",
    "expo-image-picker": "~9.1.0",
    "expo-linear-gradient": "~8.3.0",
    "expo-notifications": "~0.7.2",
    "expo-permissions": "~9.3.0",
    "expo-status-bar": "~1.0.2",
    "moment": "^2.29.1",
    "native-base": "^2.13.14",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-39.0.3.tar.gz",
    "react-native-bouncy-checkbox": "^2.1.1",
    "react-native-calendars": "^1.1262.0",
    "react-native-gesture-handler": "^1.7.0",
    "react-native-google-places-autocomplete": "^2.2.0",
    "react-native-lightbox": "^0.8.1",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-maps": "0.27.1",
    "react-native-masked-text": "^1.13.0",
    "react-native-modal": "^11.5.6",
    "react-native-modalize": "^2.0.8",
    "react-native-parallax-scroll-view": "^0.21.3",
    "react-native-picker-select": "^8.0.4",
    "react-native-popup-menu": "^0.15.10",
    "react-native-reanimated": "^1.13.1",
    "react-native-safe-area-context": "3.1.4",
    "react-native-screens": "^2.10.1",
    "react-native-select-multiple": "^2.1.0",
    "react-native-skeleton-placeholder": "^5.0.0",
    "react-native-spinkit": "^1.5.1",
    "react-native-super-grid": "^4.0.3",
    "react-native-toast-message": "^1.4.1",
    "react-native-web": "~0.13.12",
    "react-redux": "^7.2.2",
    "redux": "^4.0.5",
    "styled-components": "^5.2.0",
    "tslib": "^2.2.0"
  },
  "devDependencies": {
    "@babel/core": "~7.9.0"
  },
  "resolutions": {
    "styled-components": "^5"
  },
  "private": true
}

对怎么了有什么想法吗？

Answer 1

tl博士

来自MaskedView上的世博会文档

在任何给定时间，您只能在项目中安装@react-native-community/masked-view或@react-native-masked-view/masked-view之一。ReactiveNavigationv5.x需要@react-native-community/masked-view，所以如果使用ReveNavigationv5.x，则应该使用该包。

react-native-skeleton-placeholder@5.0.0依赖于与@react-native-community/masked-view冲突的@react-native-masked-view/masked-view。要解决这个问题，可以删除@react-native-community/masked-view的任何依赖项，或者像我的例子中的补丁 react-native-skeleton-placeholder那样使用@react-native-community/masked-view。

为什么？

react-native-skeleton-placeholder@5.0.0依赖于@react-native-masked-view/masked-view。但是，在我的示例中，@react-navigation/stack依赖于@react-native-community/masked-view，这会导致冲突和运行时/构建错误。

关于这个主题有几个bug报告。其中一个更有帮助的是：https://github.com/react-native-masked-view/masked-view/issues/111

其中一位作者在评论中指出，这：

我不打算维护@react-native-community/masked-view包，因为名称空间已更改为@react-native-masked-view

因此，最好的方法似乎是消除对@react-native-community/masked-view的依赖，转而使用@react-native-masked-view/masked-view。不幸的是，在我的情况下是不可能的。相反，我最终使用了补补 react-native-skeleton-placeholder来使用@react-native-community/masked-view。

这是我的补丁文件：

diff --git a/node_modules/react-native-skeleton-placeholder/lib/SkeletonPlaceholder.js b/node_modules/react-native-skeleton-placeholder/lib/SkeletonPlaceholder.js
index 3c35038..41f7a8f 100644
--- a/node_modules/react-native-skeleton-placeholder/lib/SkeletonPlaceholder.js
+++ b/node_modules/react-native-skeleton-placeholder/lib/SkeletonPlaceholder.js
@@ -35,7 +35,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = __importStar(require("react"));
 const react_native_1 = require("react-native");
-const masked_view_1 = __importDefault(require("@react-native-masked-view/masked-view"));
+const masked_view_1 = __importDefault(require("@react-native-community/masked-view"));
 const react_native_linear_gradient_1 = __importDefault(require("react-native-linear-gradient"));
 const SCREEN_WIDTH = react_native_1.Dimensions.get("window").width;
 function SkeletonPlaceholder({ children, backgroundColor = "#E1E9EE", speed = 800, highlightColor = "#F2F8FC", direction = "right", }) {

您可以使用贴片包装模块将其应用于本地安装。

Answer 2

如果使用纱线分辨率，请尝试将蒙面视图依赖设置为与在yarn.lock中使用的版本相同。

例如，您让"@react-native-community/masked-view": "0.1.10"将其添加到“解决方案”部分，它应该解决该版本中的任何子依赖关系。

尝试使用此命令快速查看是否存在版本不匹配。

yarn list --pattern @react-native-community/masked-view

它应该输出yarn.lock文件的依赖树。

在修复这些依赖项不匹配之后，您将需要执行一个干净的安装IE，删除所有的node_modules，重置缓存，清理xcode构建，pod安装等等。

Answer 3

最快的解决方案如下：

首先需要更改下面路径中的包：(访问下面的react本机-骨架-占位符文件)

node_modules/react-native-skeleton-placeholder/lib/SkeletonPlaceholder.js

搜索下一行并相应地更改它..。

出发地：

const masked_view_1 = __importDefault(require("@react-native-masked-view/masked-view"));

To:

const masked_view_1 = __importDefault(require("@react-native-community/masked-view"));

然后，将以下内容保存在package.json中

"@react-native-masked-view/masked-view": "^0.2.6",

谢谢祝你好运。