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] <name>

Options:

  -h, --help                                output usage information
  -V, --version                             output the version number
  -p, --prefix <prefix>                     The prefix for the library (Default: `RN`)
  --module-prefix <modulePrefix>            The module prefix for the library (Default: `react-native`)
  --package-identifier <packageIdentifier>  (Android only!) The package name for the Android module (Default: `com.reactlibrary`)
  --namespace <namespace>                   (Windows only!) The namespace for the Windows module
   (Default: The name as PascalCase)
  --platforms <platforms>                   Platforms the library will be created for. (comma separated; default: `ios,android,windows`)
  --github-account <github_account>         The github account where the library is hosted (Default: `github_account`)
  --author-name <name>                      The author's name (Default: `Your Name`)
  --author-email <email>                    The author's email (Default: `yourname@email.com`)
  --license <license>                       The license type of this library (Default: `Apache-2.0`)
  --generate-example <shouldGenerate>       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 <packagename> versions --json

首次发布

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

npm publish

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

更新发布

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

$ npm version <update_type>
$ npm publish

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

看下表:

参照文章:

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

2021-8-21 更新

npx create-react-native-library react-native-awesome-module