ReactNative 与Android 原生传参数 ReadableMap WritableMap

最新推荐文章于 2024-02-01 14:00:36 发布

danfengw

最新推荐文章于 2024-02-01 14:00:36 发布

阅读量4.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： React Native

本文链接：https://blog.youkuaiyun.com/danfengw/article/details/83859935

React Native 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了React Native应用中，JavaScript与原生模块如何通过ReadableMap和WritableMap进行参数传递，包括从React Native向原生传递数据，以及原生模块向React Native回传数据的过程。同时，探讨了原生模块如何主动向JavaScript发送事件通知。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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