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

写在前面

在做react-native开发的时候，我们经常会找到一些第三方组件，并且通过npm install的方式很方便的安装使用。在使用的同时，你是否想过，我们自己应该如何开发并发布一个组件呢？不管是给自己的多个项目共用，或者开源给到别人用，这都是一件很酷的事情。

那么今天，我就以我自己开发的一个在ios和android通用的CardView组件为例来讲一下，如何开发一个自己的组件，并开源到github、发布到npm上去

一个说明

我的组件名为react-native-rn-cardview。教程里如果出现react-native-cardview组件名，视为同一意思。

1 创建并实现

1.1 创建自定义组件模版项目

1.1.1 安装react-native-create-library

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

1.1.2 创建模板项目

我们用命令react-native-create-library创建项目，并指定平台为ios,android，指定android中的package，其他参数可以自行参考在react-native-create-library在 github 上的文档说明，这里就不赘述

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

我们重命名一下项目名

$ mv cardview react-native-cardview

有人可能会说，楼主为什么不直接生成react-native-cardview的项目，而要先生成cardview再重命名。其实这是一个小技巧，因为利用react-native-create-library生产的项目，一些跟组件相关的名称或者类会默认加上react-native或者RN前缀。
例如，如果你的初始项目名是react-native-card-view，那么package.json中定义的组件名将是react-native-react-native-card-view，android模块中定义的相关类会是RNReactNativeCardviewModule.java，这显然比较丑啊。

ok, 我们继续。

现在的目录结构：

$ tree

└── react-native-cardview
    ├── README.md
    ├── android
    │   ├── build.gradle
    │   └── src
    │       └── main
    │           ├── AndroidManifest.xml
    │           └── java
    │               └── com
    │                   └── reactlibrary
    │                       ├── RNCardviewModule.java
    │                       └── RNCardviewPackage.java
    ├── index.js
    ├── ios
    │   ├── RNCardview.h
    │   ├── RNCardview.m
    │   ├── RNCardview.podspec
    │   ├── RNCardview.xcodeproj
    │   │   └── project.pbxproj
    │   └── RNCardview.xcworkspace
    │       └── contents.xcworkspacedata
    └── package.json

生成好组件项目后，就可以开始编写实现代码了

2 编写代码

编写代码分为三部分，一部分是android原生代码，一部分是iOS原生代码，一部分是react-native(或者javascript)代码。由于react-native-cardview只涉及到android原生模块，所以本篇文章暂不涉及到iOS原生模块开发，如果大家感兴趣，我可以另开一篇文章专门讲一下iOS原生模块相关内容

2.1 编写Android Native Module

编写android原生代码，一般以下三个类是必须的：

2.1.1 RNxxxModule

这个类主要作用是定义原生模块名，可以直接在javascript中通过React.NativeModules.xxx来访问，其中xxx是在RNxxxModule类中定义的getName方法返回值。以下为我组件react-native-cardview中的Module类

RNCardViewModule.java

package com.quenice.reactnative;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.Callback;

public class RNCardViewModule extends ReactContextBaseJavaModule {

  private final ReactApplicationContext reactContext;

  public RNCardViewModule(ReactApplicationContext reactContext) {
    super(reactContext);
    this.reactContext = reactContext;
  }

  @Override
  public String getName() {
    return "RNCardView";
  }
}

2.1.2 RNxxxManager

Manager类主要是组件的原生实现，并且把react-native组件的属性映射到原生属性

RNCardViewManager.java

package com.quenice.reactnative;

import android.graphics.Color;
import android.support.v7.widget.CardView;
import android.view.View;

import com.facebook.react.uimanager.PixelUtil;
import com.facebook.react.uimanager.ThemedReactContext;
import com.facebook.react.uimanager.ViewGroupManager;
import com.facebook.react.uimanager.annotations.ReactProp;
import com.facebook.react.views.view.ReactViewGroup;

public class RNCardViewManager extends ViewGroupManager<CardView> {
    @Override
    public String getName() {
        return "RNCardView";
    }

    @Override
    protected CardView createViewInstance(ThemedReactContext reactContext) {
        CardView cardView = new CardView(reactContext);
        cardView.setUseCompatPadding(true);
        cardView.setContentPadding(0, 0, 0, 0);
        ReactViewGroup reactViewGroup = new ReactViewGroup(reactContext);
        cardView.addView(reactViewGroup);
        return cardView;
    }

    @ReactProp(name = "cardElevation", defaultFloat = 0f)
    public void setCardElevation(CardView view, float cardElevation) {
        view.setCardElevation(PixelUtil.toPixelFromDIP(cardElevation));
    }
...
}

2.1.3 RNxxxPackage

Package类主要用于注册原生模块、原生组件实现，也就是注册上面的Module和Manager类

RNCardViewPackage.java

package com.quenice.reactnative;

import java.util.Arrays;
import java.util.Collections;
import java.util.List;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import com.facebook.react.bridge.JavaScriptModule;
public class RNCardViewPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
      return Arrays.<NativeModule>asList(new RNCardViewModule(reactContext));
    }

    // Deprecated from RN 0.47
    public List<Class<? extends JavaScriptModule>> createJSModules() {
      return Collections.emptyList();
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
      return Arrays.<ViewManager>asList(new RNCardViewManager());
    }
}

2.2 编写iOS原生代码

react-native-cardview
iOS的实现方式直接利用react-native中shadow相关属性就可以实现，所以本文暂不涉及

2.3 编写ReactNative代码

编写好了android/iOS原生模块后，需要编写javascript代码来桥接react-native与原生模块。

RNCardView.android.js

import PropTypes from 'prop-types';
import {requireNativeComponent, View} from 'react-native';

const iface = {
    name: 'CardView',
    propTypes: {
        cardElevation: PropTypes.number,
        maxCardElevation: PropTypes.number,
        backgroundColor: PropTypes.string,
        radius: PropTypes.number,
        ...View.propTypes, // include the default view properties
    },
};

module.exports = requireNativeComponent('RNCardView', iface);

3 代码上传与组件发布

3.1 代码上传到github

编写完代码后，我们需要把它上传到github上，之后在组件发布到npm的时候也需要用到代码的github地址
。如果你没有做github相关的配置，可以参考我另一篇文章：安装GIt并配置连接GitHub

执行以下命令把代码同步到你github对应的repository中：

$ git add .
$ git commit -a -m "initial commit"
$ git push -u origin master

同步之后可以到github中看下是否push成功：

https://github.com/YourGithubAccount/YourRepository

3.2 组件发布

开发好组件之后，想在其他的项目(或者提供给其他人安装使用)中通过npm install的方式安装你的组件，那么你的组件必须发布到npm registry中。

3.2.1 npm registry

npm registry 是什么

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

npm官方registry为：http://registry.npmjs.org/

国内速度较快的为：https://registry.npm.taobao.org/

查看

你可以查看当前使用的registry:

$ npm config get registry

切换

当然也可以通过命令切换当前使用的npm registry

# 全局切换
$ npm config set registry http://registry.npmjs.org/

有时候你可能只想在执行某些npm命令时临时切换，这个时候，可以使用--registry来指定临时切换的registry，比如在npm发布

$ npm publish --registry http://registry.npmjs.org/

就可以临时指定，当然，在命令执行结束之后，registry仍然会恢复到原来的registry

3.2.2 创建/登陆npm registry账户

要发布组件到npm registry，你必须要是npm registry的注册用户，通过：

$ npm adduser

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

$ npm login

来登陆npm registry账户。

利用以下两种方式来确认你是否创建/登陆成功npm registry

命令$ npm whoami确认本地是否成功登陆认证成功
在线打开 https://npmjs.com/~username 查看是否创建账户成功

3.2.3 发布前准备

3.2.3.1 .gitignore 和 .npmignore

在.gitignore中定义哪些文件不上传到github中
在.npmignore中定义哪些文件发布时不打包
如果有.gitignore但是没有.npmignore文件，那么.gitignore可以充当.npmignore的作用
具体规则可以参照：npm-developers, .gitignore or .npmignore pattern rules

3.2.3.2 package.json

package.json文件定义了发布的所有信息，包括：组件名、版本、作者、描述、依赖等等关键信息。具体可以参照 Working with package.json

下面是react-native-cardview的package.json文件内容：

{
  "name": "react-native-rn-cardview",
  "version": "1.0.0",
  "description": "A ReactNative CardView Component for android and iOS",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "react-native",
    "react-component",
    "react-native-component",
    "react",
    "mobile",
    "ios",
    "android",
    "cardview"
  ],
  "author": {
    "name": "quenice",
    "email": "qiubing.it@gmail.com"
  },
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "git@github.com:quenice/react-native-cardview.git"
  },
  "devDependencies": {
    "react": "^16.2.0",
    "react-native": "^0.53.0"
  },
  "peerDependencies": {
    "react": "^16.2.0"
  },
  "dependencies": {
    "prop-types": "^15.6.0"
  }
}

3.2.3.3 编写readme.md

可以在readme.md文件中详细说明组件的使用方法、注意事项等。一般使用Markdown语法来编写

3.2.4 发布

做好以上准备之后，就可以发布了。这里需要注意，首次发布跟后面更新发布是不一样的。

首次发布

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

$ 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呢？看下表

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

注意

如果首次发布版本号不是1.0.0的话，那么用$ npm version <update_type>
来更新会报错，因为你没有按照它约定的版本规则来，这个时候，你可以手动修改package.json中的version字段为符合约定规则的版本号，然后直接执行$ npm publish就可以，然后下次再增量更新的时候，就可以直接使用$ npm version <update_type>的方式来自动更新版本号了

4 测试

组件从开发到最终发布的过程中，需要不断进行测试，确保功能正常，那如何进行测试呢？

4.1 创建一个react-native项目

首先我们创建一个叫做example的react-native项目

$ react-native init example

example项目目录可以和组件项目目录react-native-cardview同级，当然你也可以放在任何你想放的位置，这里为了操作方便，我们就把两个目录放在同级目录。也就是说，现在的目录是这样

$ tree
.
├── example
└── react-native-cardview

然后我们要做的就是把本地或者已发布的组件安装到example项目中进行测试

4.2 本地代码测试

在组件未发布之前，我们可以直接安装本地代码到example项目中进行测试，有以下几种方式都可以做到

4.2.1 yarn link

$ cd react-native-cardview
$ yarn link
$ cd ../example
$ yarn link react-native-cardview
$ react-native link react-native-cardview

说明几点：

yarn link是把当前目录中的本地代码用yarn注册为react-native-cardview的一个本地组件，组件名字react-native-cardview其实是根据package.json中的name字段的值来的，跟目录名无关，只不过这里正好等于目录名
yarn link react-native-cardview命令是把这个本地组件react-native-cardview安装到了example的项目中，你可以在example/node_modules中找到这个组件
react-native link react-native-cardview这个大家应该知道，就是做了android/iOS的原生模块link
其实yarn link这种方式简单来说，就是做了一个symbol link，也就是说，example/node_modules/react-native-cardview/目录中的内容是指向react-native-cardview/目录内容，你改动react-native-cardview/目录下的代码，相当于直接改动example/node_modules/react-native-cardview/这个目录中的代码，这样就能够达到边修改组件代码边看效果的目的了

4.2.2 package.json中配置本地路径

直接在example的package.json中增加dependencies

example/package.json

{
  "name":"example",
  ...
  "dependencies": {
    "react-native": "^0.55.4",
    "react-native-cardview":"file:../react-native-cardview",
    ...
  }
  ...
}

然后执行

$ react-native link react-native-cardview

跟yarn link一样，也相当于做了symbol link，直接修改react-native-cardview/目录下的代码，相当于直接改动example/node_modules/react-native-cardview/这个目录中的代码

4.2.3 直接copy本地代码

这种方式就比较简单粗暴了，直接copyreact-native-cardview/目录中内容到example/node_modules/react-native-cardview/这个目录中

$ cp -rf react-native-cardview/ example/node_modules/

然后执行

$ react-native link react-native-cardview

这种方式缺点就是每次在react-native-cardview/改完代码后，需要手工copy到example/node_modules/react-native-cardview/

4.3 已上传/发布代码测试

已上传到github或者发布到npm registry的组件，测试方式就跟普通我们安装一个第三方组件一样了。

4.3.1 通过github

加入你的代码通过git上传到了github仓库上，那么，你可以直接通过npm install来安装你的组件

npm install --save https://github.com/quenice/react-native-cardview.git

或者

npm install --save git@github.com:quenice/react-native-cardview.git

注意：根据你自己ghthub上的URL替换以上的HTTPS或者SSH

然后执行

$ react-native link react-native-rn-cardview

4.3.2 通过npm

这种方式就跟按照第三方组件没有区别了

$ npm install --save react-native-rn-cardview

然后执行

$ react-native link react-native-rn-cardview

结语

至此，一个react-native组件完整的开发-测试-发布的生命周期就讲完了。

由于是结合我自己开发的组件react-native-rn-cardview的实际开发过程，所以难免有遗漏，肯定也有许多不足的地方。如果大家有什么问题，或者发现哪里有错误，欢迎大家在评论区给我留言，我们一起探讨、一起解决。

另外如果在react-native中有需要用到CardView的，欢迎使用react-native-rn-cardview

最后编辑于：2018.09.28 19:02:10

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 212,080评论 6赞 493
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,422评论 3赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 157,630评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,554评论 1赞 284
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,662评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,856评论 1赞 290
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,014评论 3赞 408
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,752评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,212评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,541评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,687评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,347评论 4赞 331
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,973评论 3赞 315
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,777评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,006评论 1赞 266
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,406评论 2赞 360
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,576评论 2赞 349

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

写在前面

1 创建并实现

1.1 创建自定义组件模版项目

1.1.1 安装react-native-create-library

1.1.2 创建模板项目

2 编写代码

2.1 编写Android Native Module

2.1.1 RNxxxModule

2.1.2 RNxxxManager

2.1.3 RNxxxPackage

2.2 编写iOS原生代码

2.3 编写ReactNative代码

3 代码上传与组件发布

3.1 代码上传到github

3.2 组件发布

3.2.1 npm registry

npm registry 是什么

查看

切换

3.2.2 创建/登陆npm registry账户

3.2.3 发布前准备

3.2.3.1 .gitignore 和 .npmignore

3.2.3.2 package.json

3.2.3.3 编写readme.md

3.2.4 发布

首次发布

更新发布

4 测试

4.1 创建一个react-native项目

4.2 本地代码测试

4.2.1 yarn link

4.2.2 package.json中配置本地路径

4.2.3 直接copy本地代码

4.3 已上传/发布代码测试

4.3.1 通过github

4.3.2 通过npm

结语

推荐阅读更多精彩内容