开发 ReactNative Android 原生模块并发布到 npm 仓库

前言

在使用 ReactNative 开发过程当中，因为 ReactNative API 有限，不免会遇到没法实现的效果，这时就须要借助原生模块了。 今天咱们尝试一下开发一个 ReactNative 原生模块并发布到 npm 仓库。

准备工做

1. 安装 ReactNative 开发环境

2. 建立一个 ReactNative 项目

$ react-native init AwesomeProject
复制代码

开发原生模块

建立原生模块

建立好项目后，用 AndroidStudio 打开 AwesomeProject/android/ 目录下的 Android 项目。 新建一个 Android Library ，咱们以原生对话框为例

为原生模块添加 ReactNative 依赖，在 dialogmodule 下的 build.gradle 的 dependencies 下添加

compile "com.facebook.react:react-native:+"
复制代码

为 app 添加原生模块依赖，在 app 下的 build.gradle 的 dependencies 下添加

compile project(':dialogmodule')
复制代码

编写原生模块代码

在原生模块中添加继承自 ReactContextBaseJavaModule 的类，重写 getName() 方法，js 代码经过这个 name 来访问原生模块，在该类中添加提供给 js 访问的原生方法

public class DialogModule extends ReactContextBaseJavaModule {

    public DialogModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

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

    @ReactMethod
    public void showDialog(String message) {
        // 原生方法内容
    }
复制代码

原生模块的编写规范不是本文的重点，你们能够参考官方指南原生模块

注册原生模块

1. 在原生模块中添加继承自 ReactPackage 的类，注册原生模块

public class DialogPackage implements ReactPackage {

    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new DialogModule(reactContext));
        return modules;
    }

    @Override
    public List<Class<? extends JavaScriptModule>> createJSModules() {
        return Collections.emptyList();
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}
复制代码

2. 在 app 的 MainActivity 中添加该 Package

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            new DialogPackage() // 添加原生模块的 Package
    );
}
复制代码

到这里，咱们的原生模块已经能够供 js 代码访问了

// 导入
import {
	NativeModules,
} from 'react-native';

// 调用
NativeModules.DialogModule.showDialog('message')
复制代码

发布原生模块到 npm

准备发布文件

若是咱们发现咱们的原生模块特别好用，想让其余人也用到怎么办，相似于 java 的 jcenter 仓库，咱们须要把模块发布到 npm 仓库。

1. 复制文件 新建一个文件夹 react-native-dialog ，在该目录下建立一个 android 文件夹，表示咱们要发布的是一个 android 模块，若是你同时开发了这个模块的 iOS 版本，那么放在 ios 目录下便可。 把原生模块 dialogmodule 目录下的文件（除了 build 等临时文件）复制到 android 目录下

2. 添加原生模块入口文件 在 react-native-dialog 下新建一个 index.js 文件

//index.js
import React, { NativeModules } from 'react-native';
module.exports = NativeModules.DialogModule;
复制代码

3. 添加模块信息 在 react-native-dialog 目录下使用 npm init 命令来建立 package.json 文件，该文件包含了咱们的模块信息，咱们根据提示输入 输入完成并确认后，package.json 文件就建立好了

{
  "name": "react-native-dialog",
  "version": "1.0.0",
  "description": "a native dialog module",
  "main": "index.js",
  "keywords": [
    "dialog"
  ],
  "author": "xxx",
  "license": "xxx",
  "homepage": "http://xxx.com/",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/xxx/react-native-dialog.git"
  },
  "bugs": {
    "url": "https://github.com/xxx/react-native-dialog/issues"
  }
}
复制代码

4. 添加 README.md 添加模块的详细使用文档，供使用者阅读

5. 添加 .npmignore 相似于 .gitignore ，配置上传到 npm 须要忽略的文件，能够参考下面的

# Android/IJ
#
*.iml
.idea
.gradle
build
local.properties
复制代码

发布模块

1. 建立 npm 帐号 若是没有 npm 帐号，须要建立一个帐号，这个帐号会被添加到npm本地的配置中，用来发布module用

$ npm adduser   
Username: your name
Password: your password
Email: yourmail@gmail.com
复制代码

已有 npm 帐号，登陆

npm login
复制代码

根据提示输入信息 成功以后，npm会把认证信息存储在~/.npmrc中，而且能够经过如下命令查看npm当前使用的用户

$ npm whoami
复制代码

2. 发布 在 react-native-dialog 目录下执行

$npm publish
+ react-native-nativemodule-example@1.0.0
复制代码

若是看到下面的提示，说明已经发布成功了。 建议把代码托管到 GitHub ，方便跟踪问题。

3. 测试是否可用 新建一个 ReactNative 项目，按照添加其余原生模块的方法添加咱们发布的原生模块，并测试是否可用

4. 发布新版本 更新了代码后，只须要修改 package.json 文件中的 version 字段，并使用 npm publish 进行发布

总结

本文主要介绍了如何建立 ReactNative Android 原生模块，并发布到 npm ，重点在于如何发布。 若是你在阅读中遇到问题，欢迎在评论中给我留言。

迁移自个人简书 2017.08.30