需要 rnpm 链接的 React Native 组件依赖

Posted 2023-03-07

【中文标题】需要 rnpm 链接的 React Native 组件依赖

【英文标题】：React Native component dependency which requires rnpm link

【发布时间】：2017-01-10 01:17:54

【问题描述】：

我刚刚为 React-Native 创建了一个组件，我将很快将它作为一个包推送到 npm。虽然我遇到了问题。

该组件依赖于另一个名为 react-native-image-resizer 的 npm 包。此软件包需要与rnpm 链接才能工作。

虽然，当我只是在一个全新的项目中安装我的组件时，依赖项不会自动链接，并且本机库不会出现在项目中。当然，当我运行rnpm link 时，它也不会将其添加到项目中。

所以我想知道安装和链接此依赖项的最佳方式是什么？

MacBook-Pro:Example $ npm install react-native-image-crop

> react-native-image-crop@1.0.0 preinstall /Users/alexmngn/Work/react-native-image-crop/Example/node_modules/.staging/react-native-image-crop-95365d1b
> npm install --save react-native-image-resizer

react-native-image-crop@1.0.0 (git+ssh://[e-mail]/alexmngn/react-native-image-crop.git#90e002c7d0f01c9d61277c30cad375560f09a94a) /Users/alexmngn/Work/react-native-image-crop/Example/node_modules/.staging/react-native-image-crop-95365d1b
├── UNMET DEPENDENCY react-native@^0.31.0
└── react-native-image-resizer@0.0.9 

npm WARN react-native-image-resizer@0.0.9 requires a peer of react-native@>=v0.14.2 but none was installed.
npm WARN react-native-image-crop@1.0.0 No repository field.
- react-native-image-resizer@0.0.9 node_modules/react-native-image-crop/node_modules/react-native-image-resizer
Example@0.0.1 /Users/alexmngn/Work/react-native-image-crop/Example
└── react-native-image-crop@1.0.0  (git+ssh://[e-mail]/alexmngn/react-native-image-crop.git#90e002c7d0f01c9d61277c30cad375560f09a94a)

MacBook-Pro:Example $ rnpm link
MacBook-Pro:Example $ # Nothing gets linked here...

另外，正如您在上面看到的那样，当我在示例项目中安装组件时，我遇到了 react-native 未满足的对等依赖问题，即使它在我的包中的依赖项中正确列出（具有正确的版本） .json：

  "name": "Example",
  "version": "0.0.1",
  "private": true,
  "scripts": 
    "start": "node node_modules/react-native/local-cli/cli.js start"
  ,
  "dependencies": 
    "react": "15.2.1",
    "react-native": "^0.31.0",
    "react-native-image-crop": "git+ssh://github.com/alexmngn/react-native-image-crop.git"
  

知道它为什么抱怨吗？

这里提供的组件回购：http://github.com/alexmngn/react-native-image-crop.git

谢谢

【参考方案1】：

rnpm link 只链接它在package.json 中找到的包，通常这些包是通过命令rnpm install 或npm install --save 安装的。

为了让那些安装你的包的人自动执行此操作，你可以编写一个preinstall npm 脚本，该脚本将在安装包之前执行。

在package.json中添加scripts这样的块

  "scripts": 
    "preinstall": "npm install --save react-native-image-resizer@0.0.9"
  

这样做之后，当有人尝试通过 npm 安装你的 pacakge 时，react-native-image-resizer 将被首先安装，并在 package.json -> 依赖中添加 leave ab 条目，以便 rnpm 链接可以正常工作。

阅读更多关于npm script的信息

【讨论】：

我无法解决我的问题。我刚刚使用我的组件在 github 上创建了一个 repo，链接在问题帖子中。你能看出什么问题吗？