制作自己react-native组件并发布到npm

1.安装 react-native-create-library 库

官方地址

npm install -g react-native-create-library

1.1 创建一个模板项目

 react-native-create-library 
--package-identifier com.quenice.cardview 
--platforms android,ios card

指令的使用

Usage: react-native-create-library [options] 

Options:

  -h, --help                                output usage information
  -V, --version                             output the version number
  -p, --prefix                      The prefix for the library (Default: `RN`)
  --module-prefix             The module prefix for the library (Default: `react-native`)
  --package-identifier   (Android only!) The package name for the Android module (Default: `com.reactlibrary`)
  --namespace                    (Windows only!) The namespace for the Windows module
   (Default: The name as PascalCase)
  --platforms                    Platforms the library will be created for. (comma separated; default: `ios,android,windows`)
  --github-account          The github account where the library is hosted (Default: `github_account`)
  --author-name                       The author's name (Default: `Your Name`)
  --author-email                     The author's email (Default: `[email protected]`)
  --license                        The license type of this library (Default: `Apache-2.0`)
  --generate-example        Will generate a RN example project and link the new library to it (Default: `false`)

1.2 重命名一下项目名

mv card react-native-card

1.3 创建模板项目依赖

react native init example

项目的目录

2 组件注册安装到模板项目中

cd react-native-card
$ yarn link
$ cd example
$ yarn link react-native-card
$ react-native link react-native-card

命令说明

• 1.yarn link是把当前目录中的本地代码用yarn注册为react-native-card的一个本地组件，组件名字react-native-card,其实是根据package.json中的name字段的值来的，跟目录名无关，只不过这里正好等于目录名.

• 2. yarn link react-native-card命令是把这个本地组件react-native-card安装到了example的项目中，你可以在example/node_modules中找到这个组件

• 3.react-native link react-native-card这个大家应该知道，就是做了android/iOS的原生模块link

• 4. yarn link这种方式简单来说，就是做了一个symbol link，也就是说，example/node_modules/react-native-card目录中的内容是指向react-native-card/目录内容，你改动react-native-card/目录下的代码，相当于直接改动example/node_modules/react-native-card/这个目录中的代码，这样就能够达到边修改组件代码边看效果的目的了.

3 编写相应的原生代码

...

4 发布

注册一个源

npm set registry url

npm registry就相当于一个包注册管理中心。它管理着全世界的开发者们发布上来的各种插件，同时开发者们可以通过
npm install的方式安装所需要的插件。

• npm查看包的最新版本

npm view  versions --json

首次发布

• 第一次发布的话，直接执行命令：

npm publish

就搞定了，可以在线查看确认是否发布成功。访问链接(是你发布的npm package名)：
https://www.npmjs.com/package/
看看是否已经有内容了，有内容说明发布成功了。

更新发布

如果不是首次发布，需要执行两个命令

$ npm version 
$ npm publish

$ npm version命令是用来自动更新版本号，
update_type 取值有patch minor major。
那么在什么场景应该选择什么update_type呢？

看下表:

update_type	场景	版本号规则	举例
-	首次发布	版本号1.0.0	1.0.0
patch	修复bug、微小改动时	从版本号第3位开始增量变动	1.0.0 -> 1.0.1
minor	上线新功能，并且对当前版本已有功能模块不影响时	从版本号第2位开始增量变动	1.0.3 -> 1.1.3
major	上线多个新功能模块，并且对当前版本已有功能会有影响时	从版本号第1位开始增量变动	1.0.3 -> 2.0.0

参照文章:

• 开发自己的react-native组件并发布到npm