React-Native与原生的模块桥接（一）

目前的React-Native方面，虽然大部分逻辑等都在前端即可完成，但是必要支付、第三方登陆、分享、地图、定位等等模块功能，还是应该让原生的Android做好供给前端直接使用。

本篇例子仅仅用来说明如何进行 模块桥接。

模块桥接里涉及到的通信机制，可以移步React-Native 与原生的3种交互通信（Android）

废话不多说，下面看看我们如何桥接一个第三方登陆模块。

PS：为了方便让原生开发使用，建议将桥接的不论是模块还是View都进行模块化、组件化。

效果图：

Native部分：

创建ThirdLoginModule并继承ReactContextBaseJavaModule

public class ThirdLoginModule extends ReactContextBaseJavaModule {

    private static final String TAG = "ThirdLoginModule";

    private static String REACT_CLASS = "AllureThirdLoginModule";

    public static final String PLATFORM_QQ = "PLATFORM_QQ";
    public static final String PLATFORM_WECHAT = "PLATFORM_WECHAT";

    public static final int PLATFORM_VALUE_QQ = 1;
    public static final int PLATFORM_VALUE_WECHAT =2;

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

    @Override
    public String getName() {
        return REACT_CLASS;
    }

    @Nullable
    @Override
    public Map<String, Object> getConstants() {
        final Map<String, Object> constants = new HashMap<>();
        constants.put("PLATFORM_QQ", PLATFORM_VALUE_QQ);
        constants.put("PLATFORM_WECHAT", PLATFORM_VALUE_WECHAT);
        return constants;
    }

    /**
     * 第三方登陆
     * @param platform
     * @param callback
     */
    @ReactMethod
    public void thirdLogin(int platform, Callback callback) {
        switch (platform) {

            case PLATFORM_VALUE_QQ:
                //这里QQ 的登陆,至于需要回传给前端什么由你决定
                Log.e("QQ","QQ");
                callback.invoke("QQ登陆");
                break;
            case PLATFORM_VALUE_WECHAT:
                //这里WE_CHAT 的登陆,至于需要回传给前要什么由你决定
                Log.e("WECHAT","WECHAT");
                callback.invoke("WECHAT登陆");
                break;
        }

    }

}

方法名	说明
ThirdLoginModule	这个不用多说吧
getName	返回JS端需要的字符串名字
getConstants	定义Native与JS端同步预设的常量（非必须实现）
thirdLogin	登陆方法，需要 @ReactMethod注解，返回值永远为void。 这里的第二个参数CallBack对面JS的function

JS部分：

qq(){
        NativeModules.AllureThirdLoginModule.thirdLogin(
            NativeModules.AllureThirdLoginModule.PLATFORM_QQ,
            (msg) => {
                console.log(msg);
                ToastAndroid.show(msg, ToastAndroid.SHORT);
            }
        );
    }

weChat(){
        NativeModules.AllureThirdLoginModule.thirdLogin(
            NativeModules.AllureThirdLoginModule.PLATFORM_WECHAT,
            (msg) => {
                console.log(msg);
                ToastAndroid.show(msg, ToastAndroid.SHORT);
            }
        );
    }

OK。 模块桥接完毕，就是这么简单。下一篇，咱们继续桥接控件View相关案例。

源码下载
国际惯例，下载后在主项目npm install在运行