RN原生插件踩坑之旅

背景介绍

之前是自己创业做互联网平台，8月份刚入职一家做母婴产品的公司，之前是自己创业做互联网平台，用到的Ionic3开发的APP。刚入职的第一天让我React-Native原生插件的开发。接到任务的我一脸懵逼，React-native不会，安卓原生不会，两个不会的加一起更是不会，不管怎么着领导安排的任务硬着头皮也得干！

环境搭建

因为我之前已经搭建好安卓开发环境，所以就没按照RN官方步骤去搭建开发环境，就安装了一个react-native的开发环境，有需要的小伙伴可以参考官方文档，这里就不多介绍了！

项目初始化

react-native init AwesomeProject

安装依赖，项目就初始化完成了，下面重点讲一下插件的开发过程，RN相关的东西省略了。用Android studio打开项目目录下的android文件夹。

接口定义

File->New->New Module...选择Android Library,下一步就可以了。

new.png

    /**
     * 发起认证，认证成功后调用支付功能
     * @param info 刷脸付参数，从服务端获取
     */
    @ReactMethod
    public void verify(ReadableMap info, final Callback callback){
        callback.invoke("hello RN");
    }

插件提供的接口需要使用ReactMethod注解

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

重写父类方法，这个名称用于RN调用插件时使用。

注册模块

public class SmilePayPackage implements ReactPackage {
    public SmilePayPackage(){

    }

    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        return Arrays.<NativeModule>asList(
                new SmilePayModule(reactContext)
        );
    }

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

RN与原生通讯

原生模块传递数据给RN支持几种模式

callback

Promise

发送事件

打印组件封装

扫描事件捕获

刷脸支付插件封装

总结