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

来源：互联网发布：db2 备份数据库编辑：程序博客网时间：2024/05/19 00:39

目前的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在运行

0 0