对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<ViewManager> 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);
}