ReactNative 与Android 原生传参数 ReadableMap WritableMap

ReadableMap

主要是rn给原生传递参数时使用
(1)rn给原生传递参数

 toast = () => {
    let obj={
      id:1,
      name:"xiaohong"
    };
    NativeModules.TestModules.Toasts(obj);
  };

(2)原生中获取数据

 @ReactMethod
    public void Toasts(ReadableMap msg) {
        ReadableNativeMap map= (ReadableNativeMap) msg;
        HashMap map2=map.toHashMap();
        Toast.makeText(mContext, (String) map2.get("name"), Toast.LENGTH_SHORT).show();
    }

WritableMap

一般用于原生给rn传递参数,这里采用的callback回调
(1)原生给rn回传数据

@ReactMethod
    public void ToastFinished(String msg, Callback callback) {
        Toast.makeText(mContext, msg, Toast.LENGTH_SHORT).show();
        WritableMap map = Arguments.createMap();
        map.putInt("id", 1);
        map.putString("name", "小明");
        WritableArray array = Arguments.createArray();
        array.pushString("哈哈1");
        array.pushString("哈哈2");
        map.putArray("sub",array );
        callback.invoke(map);
    }

(2)rn中接收回传数据

toastFinishCallback = () => {
    NativeModules.TestModules.ToastFinished("调用了原生并带有回调", (result) => {
      this.setState({
        name: result.name
      });
    });
  };

补充

原生模块可以在没有被调用的情况下往 JavaScript 发送事件通知。最简单的办法就是通过RCTDeviceEventEmitter。
原生中发送

@ReactMethod
    public void sendEvent(){
        WritableMap map = Arguments.createMap();
        map.putInt("id", 1);
        map.putString("name", "路人甲");
        mContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                .emit("sendEvent",map);
    }

js中接收

componentWillMount(){
    DeviceEventEmitter.addListener('sendEvent',(e:Event)=>{
      this.setState({
        sendEvent: e.name
      });
    })
  };

你可能感兴趣的:(React,Native)