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