关闭

React Native原生模块与JS模块通信的几种方式

标签: AndroidCallbacksPromises数据传递
3926人阅读 评论(0) 收藏 举报
分类:

React Native原生模块与JS模块通信的几种方式

React Native原生模块向JS传递数据的几种方式.png

在做React Native开发的时候避免不了的需要原生模块和JS之间进行数据传递,这篇文章将向大家分享原生模块向JS传递数据的几种方式。

方式一:通过Callbacks的方式

说起Callbacks大家都不陌生,它是最常用的设计模式之一。无论是Java,Object-c,C#,还是JavaScript等都会看到Callbacks的身影。

原生模块支持Callbacks类型的参数,该Callbacks对应JS中的function。

在原生模块中:

public class RNTestModule extends ReactContextBaseJavaModule{
    public RNTestModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }
    @Override
    public String getName() {
        return "RNTest";
    }

  @ReactMethod
  public void measureLayout(
      int tag,
      int ancestorTag,
      Callback errorCallback,
      Callback successCallback) {
    try {
      measureLayout(tag, ancestorTag, mMeasureBuffer);
      map.putDouble("relativeX",1);
      map.putDouble("relativeY", 1);
      map.putDouble("width", 2);
      map.putDouble("height",3);
      successCallback.invoke(relativeX, relativeY, width, height);
    } catch (IllegalViewOperationException e) {
      errorCallback.invoke(e.getMessage());      
    }
}

在上述代码中,measureLayout方法的参数中后两个就是Callbacks,当原生模块处理成功时通过successCallback回调来告知JS处理成功的结果,当原生模块发生异常时,则通过errorCallback回调来JS处理异常。

在JS模块中:

RNTest.measureLayout(
  100,
  100,
  (msg) => {
    console.log(msg);
  },
  (x, y, width, height) => {
    console.log(x + ':' + y + ':' + width + ':' + height);
  }
);

上述代码,是在JS模块中调用原生模块的方法measureLayout,同时向它传递了四个参数,后两个是function类型的参数用于接收原生模块的处理结果。

通过上述的方式,JS调用原生模块的measureLayout方法,原生模块则通过errorCallbacksuccessCallbackCallbacks来将处理结果传递到JS。

这种“You call me,I will callback”,的方式小伙伴们都看懂了吧。

方式二:通过Promises的方式

Promises是ES6的一个新的特性,在React Native中你会看到Promises的大量使用。
原生模块也是支持Promises的,这对喜欢使用Promises的小伙伴则是一个很好的消息。

在原生模块中:

public class RNTestModule extends ReactContextBaseJavaModule{
    public RNTestModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }
    @Override
    public String getName() {
        return "RNTest";
    }
    @ReactMethod
    public void measureLayout(
            int tag,
            int ancestorTag,
            Promise promise) {
        try {
            WritableMap map = Arguments.createMap();
            map.putDouble("relativeX",1);
            map.putDouble("relativeY", 1);
            map.putDouble("width", 2);
            map.putDouble("height",3);

            promise.resolve(map);
        } catch (IllegalViewOperationException e) {
            promise.reject(e);
        }
    }
}

上述代码中,measureLayout方法接收的最后一个为Promise,当相应的处理结果出来之后原生模块通过调用Promise的相应方法来向JS模块传递处理成功,或处理失败的数据。

提示:在原生模块中Promise类型的参数要放在最后一位,这样JS调用的时候才能返回一个Promise。

在JS模块中:

async test() {
  try {
    var {
        relativeX,
        relativeY,
        width,
        height,
    } = await RNTest.measureLayout(100, 100);

    console.log(relativeX + ':' + relativeY + ':' + width + ':' + height);  
  } catch (e) {
    console.error(e);
  }
}

在上述代码中,通过ES7的新特性async/await来修饰了test方法,来以同步方式调用原生模块的measureLayout方法,如果原生模块处理成功,
那么JS中relativeX,relativeY,width,height会获得相应的值,如果原生模块处理失败,则会抛出异常。

如果,不希望以同步的形式调用,可以这样写:

test2(){
  RNTest.measureLayout(100,100).then(e=>{
    console.log(e.relativeX + ':' + e.relativeY + ':' + e.width + ':' + e.height);
    this.setState({
      relativeX:e.relativeX,
      relativeY:e.relativeY,
      width:e.width,
      height:e.height,
    })
  }).catch(error=>{
    console.log(error);
  });
}

以上就是通过Promises的方式向JS传递数据的方式,小伙伴们看懂了吗。

上述两种方式,通过Callbacks的方式通过Promises的方式,都可以向JS模块传递数据,但都是只能传递一次。
如果,你需要多次向JS模块传递数据(如:按键事件)上述方式还是不够好,下面就像大家分享可以多次传递数据的方式。

方式三:通过发送事件的方式

原生模块支持另外一种向JS模块传递数据的方式,通过发送事件的方式。

原生模块,可以向JS传递事件而不要而不需要直接的调用,就像Android中的广播,iOS中的通知中心。

下面就向大家演示通过RCTDeviceEventEmitter,来向JS传递事件。

在原生模块中:

@Override
public void onHandleResult(String barcodeData) {
    WritableMap params = Arguments.createMap();
    params.putString("result", barcodeData);
    sendEvent(getReactApplicationContext(), "onScanningResult", params);
}

private void sendEvent(ReactContext reactContext,String eventName, @Nullable WritableMap params) {
    reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
            .emit(eventName, params);
}

上述代码向JS模块发送了一个名为“onScanningResult”的事件,并携带了“params”作为参数。

在JS模块中:

下面是在JS代码中进行监听原生模块发出的名为“onScanningResult”的事件。

componentDidMount() {
    //注册扫描监听
    DeviceEventEmitter.addListener('onScanningResult',this.onScanningResult);
}
onScanningResult = (e)=> {
    this.setState({
        scanningResult: e.result,
    });
    // DeviceEventEmitter.removeListener('onScanningResult',this.onScanningResult);//移除扫描监听
}

在JS中通过DeviceEventEmitter注册监听了名为“onScanningResult”的事件,当原生模块发出名为“onScanningResult”的事件后,绑定在该事件上的onScanningResult = (e)会被回调。
然后通过e.result就可获得事件所携带的数据。

心得:如果在JS中有多处注册了onScanningResult事件,那么当原生模块发出事件后,这几个地方会同时收到该事件。不过大家也可以通过DeviceEventEmitter.removeListener('onScanningResult',this.onScanningResult)
来移除对名为“onScanningResult”事件的监听。

另外,JS模块也支持通过Subscribable mixin,也注册监听事件,因为ES6已经不再推荐使用mixin,所以在这里也就不向大家介绍了。

三种方式的优缺点

方式 缺点 优点
通过Callbacks的方式 只能传递一次 传递可控,JS模块调用一次,原生模块传递一次
通过Promises的方式 只能传递一次 传递可控,JS模块调用一次,原生模块传递一次
通过发送事件的方式 原生模块主动传递,JS模块被动接收 可多次传递

最后

既然来了,留下个喜欢再走吧,鼓励我继续创作(^_^)∠※

如果喜欢我的文章,那就关注我的博客吧,让我们一起做朋友~~

戳这里,加关注哦:

微博:第一时间获取推送
个人博客:干货文章都在这里哦
GitHub:我的开源项目

7
0
查看评论

React-Native开发之原生模块封装(Android)升级版

实现了RN复用原生代码,即将原生模块封装成一个接口,在RN中调用。并且可以封装更加复杂的方法,同时实现了数据回调,即将数据从原生模块中传递到RN前端。
  • qq_25827845
  • qq_25827845
  • 2016-10-19 21:10
  • 8136

React-Native 原生跳转不同的RN界面的实现思路

最近在研究React-Native开发App,准备把RN运用到自己的毕业设计中,因为以前做过一个购物社交类的App,但是没有做完,所以就想把它完善一下作为毕业设计,而RN可以热更新,所以对于购物类app中的一些时常变化的商品介绍列表就准备用一下RN来试试了。 既然要使用RN和Native混合使用,...
  • u012760183
  • u012760183
  • 2016-12-20 15:51
  • 3086

react-native之native主动向js发送事件

1:新建react-native项目 将andorid部分导入到Androidstudio中 2:写一个事件发送的方法 代码如下: private void sendEvent(ReactContext reactContext, Str...
  • u014041033
  • u014041033
  • 2016-01-30 13:26
  • 5608

React Native原生模块向JS传递数据的几种方式(Android)

在做React Native开发的时候避免不了的需要原生模块和JS之间进行数据传递,这篇文章将向大家分享原生模块向JS传递数据的几种方式。 方式一:通过Callbacks的方式 说起Callbacks大家都不陌生,它是最常用的设计模式之一。无论是Java,Object-c,C#,还是Ja...
  • changsimeng
  • changsimeng
  • 2017-03-21 17:28
  • 1259

React Native 原生与JS之间事件绑定注册 作用在于原生可以直接调用JS的方法

1 前面我们已经说过了RN混合开发中,原生如何调用JS的各个页面 JS如何调用原生的activity,以及JS中如何调用原生的方法. 2 这些已经比较简单的,这一节主要说,我们如果在原生JAVA代码中,某个时刻非常想响应JS的某个方法怎么办. 目前,我还没有了解到如何可以直接调用JS的某个方法...
  • wu_xiao_yang
  • wu_xiao_yang
  • 2016-12-25 14:50
  • 1171

JavaScript 模块化入门Ⅰ:理解模块

作为一名JS初学者。假如你听到了一些诸如“模块化构建&模块化载入” “Webpack&Browserify” 或者 “AMD&CMD”之类的术语,肯定瞬间就凌乱了。 JavaScript的模块化听起来挺深奥,可其实理解它对开发者来说特别实用。 在这篇文章里,我会尽量深...
  • baidu_28312631
  • baidu_28312631
  • 2016-10-15 15:40
  • 3779

【稀饭】react native 实战系列教程之自定义原生UI组件

上一节,讲了关于RN的自定义原生模块,本节是关于自定义原生UI组件,学习完本节,你将了解到原生UI组件的开发流程,以及js如何向native发送命令和native如何向js发送事件。原生UI组件之VideoView视频播放器开发React Native并没有给我们提供VideoView这个组件,那我...
  • a631855639
  • a631855639
  • 2016-09-23 15:05
  • 5045

React native和原生之间的通信

RN中文网关于原生模块(Android)的介绍可以看到,RN前端与原生模块之间通信,主要有三种方法:1)使用回调函数Callback,它提供了一个函数来把返回值传回给JavaScript。2)使用Promise来实现。3)原生模块向JavaScript发送事件。关于使用回调,这是最简单的一种通信,这...
  • xiangzhihong8
  • xiangzhihong8
  • 2016-11-27 20:23
  • 3920

React-Native调用支付宝,微信

https://www.pingxx.com/docs/downloadsPing++ 是为移动端应用以及 PC 网页量身打造的下一代支付系统,通过一个 SDK 便可以同时支持移动端以及 PC 端网页的多种主流支付渠道,你只需要一次接入即可完成多个渠道的接入。 Ping++ SDK 包括 Clien...
  • sinat_17775997
  • sinat_17775997
  • 2017-06-26 14:39
  • 2614

React-Native 与原生的3种交互通信(Android)

React-Native与原生(Android)的交互通信
  • asddavid
  • asddavid
  • 2016-11-28 10:26
  • 8533
    个人资料
    • 访问:1017327次
    • 积分:12276
    • 等级:
    • 排名:第1412名
    • 原创:181篇
    • 转载:4篇
    • 译文:0篇
    • 评论:228条
    这里有你需要的干货!!!
    关注我,获取推送O_o
    你需要的,才是干货@开源项目
    博客专栏
    最新评论