React Native 原生模块封装、发布、调用 （Android）

想必看到这里的同学都已经完成了，React Native的基础学习。

前置知识：

• React Native 组件实现 android iOS

我们先说一下实现原理：

。。。

接下来我们以ToastAndroid为例子，来讲解如何创建原生android/iOS react-native组件。

---

android篇!

Step 1 - 新建react-native工程 TestToast

$ react-native init TestToast

Step 2 - 将新建的工程导入android studio然后新建空library

初始化一个 React Native 项目。这里以 Android 为例.

1. 用 Android Studio 选择菜单 File->open 打开 TestToast 文件夹下的 android 文件夹
2. 选择 File -> New -> New Module，选择创建一个 Android Library

3. 命名（如下图）

   图一
   

Step 3 - 完成组件代码

1. 继承ReactContextBaseJavaModule ，记得加上了‘@ReactMethod’的方法才能被js调用。

public class ToastModule extends ReactContextBaseJavaModule {

    private static final String DURATION_SHORT_KEY = "SHORT";
    private static final String DURATION_LONG_KEY = "LONG";

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

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

    @Override
    public Map<String, Object> getConstants() {
        final Map<String, Object> constants = MapBuilder.newHashMap();
        constants.put(DURATION_SHORT_KEY, Toast.LENGTH_SHORT);
        constants.put(DURATION_LONG_KEY, Toast.LENGTH_LONG);
        return constants;
    }

    @ReactMethod
    public void show(String message, int duration) {
        Toast.makeText(getReactApplicationContext(), message, duration).show();
    }
}

Step 5 - 继承ReactPackage

注意createNativeModules（）返回的是加入了 ToastModule 的集合，createJSModules（）与createViewManagers（）返回的都是空集合，如果Step 4 步继承的是BaseViewManager或其子类，那么createViewManagers（）中返回的就是加入了BaseViewManager的集合，其他的就是空集合，一般情况createJSModules（）的返回值都是空集合。

Step 6 - 新建ToastForAndroid.js，文件位置

‘ android/react-native-toast-android/ToastForAndroid.js ’代码如下，然后在 ‘android/react-native-toast-android/’下运行如下命令生成package.json文件

'use strict';

var RCTToastAndroid = require('NativeModules').ToastForAndroid;


var ToastForAndroid = {

  SHORT: RCTToastAndroid.SHORT,
  LONG: RCTToastAndroid.LONG,

  show: function (
    message: string,
    duration: number
  ): void {
    RCTToastAndroid.show(message, duration);
  },

};

module.exports = ToastForAndroid;

Step 7 - 运行确保可用

图二

Step 9 - 测试成功，在目录‘ /android/react-native-toast-android/ ’下运行命令：

$ npm adduser   //增加npm用户
$ npm publish  //上传react-naive-toast-android到npm上

Step 10 - 其他开发者使用你上传到npm上的组件方法(github上的模板)