開發 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