对Native 与 React 交互的学习

对Native 与 React 交互的学习

1\ 新建 ZhuRnCallAndroid.class 继承 ReactContextBaseJavaModule 复写getName方法

并分别定义:React调用Native 函数 :rnCallAndroid()

Native调用React代码 函数 : androidToRn()

public class ZhuRnCallAndroid extends ReactContextBaseJavaModule {

private ReactApplicationContext mContext;

public ZhuRnCallAndroid(ReactApplicationContext reactContext) {
super(reactContext);
mContext = reactContext;
}

@Override
public String getName() {
return "ZhuRnCallAndroid";
}

@ReactMethod
public void rnCallAndroid(String msg, final Callback isOk, final Callback err){
Toast.makeText(mContext,msg,Toast.LENGTH_SHORT).show();
new Thread(new Runnable() {
@Override
public void run() {
try{
Thread.sleep(3000);
String str = null;
str.toString();
isOk.invoke("回调成功");    //通过这种方式 已经实现了Android调用React端代码的通讯
}catch (Exception e){
err.invoke("回调失败");   //通过回调的方式是可控的
}
}
}).start();
//Intent  intent = new Intent(mContext,MyActivity.class);    //单纯的起一个Activity ,然后在Native中触发一个调用React事件
//intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
//mContext.startActivity(intent);
}

/**
* 调用React 端
* @param msg
*/
public void androidToRn(String msg){
//Native端主动发送事件,React端被动的接收
mContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit("zhuMonth",msg);
}
}

2\ 新建类 ZhuMyReactPack.class 并 implements ReactPackage ,并注册ZhuRnCallAndroid接口.

public class ZhuMyReactPack implements ReactPackage {
public  ZhuRnCallAndroid mZhuRnCallAndroid;
@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
List<NativeModule> list = new ArrayList<NativeModule>();
mZhuRnCallAndroid = new ZhuRnCallAndroid(reactContext);
list.add(mZhuRnCallAndroid);   //注册
return list;
}

@Override
public List<Class<? extends JavaScriptModule>> createJSModules() {
return Collections.emptyList();
}

@Override
public List<View
4000
Manager> createViewManagers(ReactApplicationContext reactContext) {
return Collections.emptyList();
}
}

3\ RN部分代码 导入NativeModules React调用Native

View部分
<Text onPress={this._onPress} style={{textAlign: 'center',backgroundColor:'red',fontSize:50}}>
OnClickToAndroid
</Text>

_onPress() {
NativeModules.ZhuRnCallAndroid.rnCallAndroid("啷个哩个啷",
(isOk)=> {
console.log(isOk);    //打印的信息从Android端返回
},
(err)=>{
console.log(err);
});
}

4\ 导入DeviceEventEmitter Native调用React

componentWillMount() {
DeviceEventEmitter.addListener("zhuMonth",this.handAndroidMan);
}

componentWillUnMount() {
DeviceEventEmitter.remove("zhuMonth",this.handAndroidMan);
}

/**
* Android端回调触发打印日志
* @param msg
*/
handAndroidMan(msg){
console.log(msg);
}