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