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

前言

我们在做RN开发时候，会利用npm安装我们需要的三方js库。当我们自己封装了一个组件打算开源给别人用时，同样想用npm来安装，这时候我们需要把自己的组件发布到npm，这样以后再用这个组件时候直接利用（npm i 组件名）就可以了。好嗨奥！

第一步：创建自定义组件模版

安装react-native-create-library

$ npm install -g react-native-create-library

创建模板

$ react-native-create-library --package-identifier com.quenice.cardview --platforms android,ios 项目名(建议不用react-native开头，因为会自动拼接)

重命名项目名

$ mv cardview react-native-项目名

删除多余项
这时候会出现ios，android，readme相关文件，需要我们一个一个文件检查删除掉不要的部分。比如当我们不需要ios，android部分，只是需要js代码。这时候我们要把ios，android文件夹删除，并修改readMe文件并把package.json文件中的main改成我们的入口js文件，并把里边的信息补全，github上的仓库也要写上，示例如下：


{
  "name": "react-native-bsrefresh-list-view",
  "version": "1.3.0",
  "description": "A list component that can be pulled up & down to refresh",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/FreeBaiShun/bsrefresh-list-view.git"
  },
  "keywords": [
    "react-native",
    "react-native-refresh",
    "react-native-refresh-list-view",
    "flatlist",
    "listview",
    "refresh"
  ],
  "main": "RefreshListView.js",
  "author": "freebs",
  "license": "MIT"
}

第二步：编写代码

这时候我们要编写js代码，这里需要根据自己的业务。

我们创建一个文件夹名字叫Demo（这里我起名叫Demo），在这个目录下创建ios，android，react-native文件夹分别写相应的项目。其实Demo文件目录是用来演示该组件的demo而已。其他文件才是要发布到npm中的。
注意：因为github上要上传全部代码，这样别人才可以下载下来运行。因此我们需要把整个代码都上传到github上，包括Demo部分。而npm中我们只需要上传除去demo部分的代码即可，因为别人只是利用npm安装该组件不需要安装Demo部分。
综上所述，我们需要把整个目录上传到github。把其余的和npm相关的代码上传到npm即可。具体目录如下:

第三步：代码上传到github

修改package.json文件把仓库地址写好，并写好版本号。
需要我们将代码上传到自己的github仓库
打个tag（刚才写好的版本号）
注意：是需要上传整个项目的包括Demo部分

第四步：准备npm registry账户

创建/登陆npm registry账户

$ npm adduser

来新增一个用户，或者你已经在官网注册了一个用户，可以通过：

$ npm login

来登陆npm registry账户
2. 这里后续可能出现404的报错
解决方案是：在官网重新注册，或者用命令行在重新注册用户（这里可能出现密码不正确等问题，要提前记好密码奥！）
3. 查看当前登录状态

$ npm whoami

第五步：发布

命令行进入要发布的路径

$ cd 项目路径

首次发布代码

$ npm publish

注意：只需要上传上面箭头提到几个文件即可

更新发布代码
首先要更改package.json中的版本号，再次上传到github，之后要打个相应的tag。再执行上面首次发布代码的命令即可。