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在運行