react-native中与原生模块通信传递数据的几种方式

最近查阅文档了解了原生模块向react-native中js模块通信数据传递的几种方式,在这里和大家分享一下。

方式一:通过Callbacks的方式。

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

在原生模块中:

image.png

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

 在JS模块中:

image.png

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

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


方式二:通过Promises的方式 

Promises是ES6的一个新的特性, 原生模块也是支持Promises的。 

 在原生模块中:

image.png

上述代码中,measureLayout方法接收的最后一个为Promise,当相应的处理结果出来之后原生模块通过调用Promise的相应方法来向JS模块传递处理成功,或处理失败的数据。提示:在原生模块中Promise类型的参数要放在最后一位,这样JS调用的时候才能返回一个Promise。

 在JS模块中:

image.png

如果原生模块处理成功, 那么JS中relativeX,relativeY,width,height会获得相应的值,如果原生模块处理失败,则会抛出异常。


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

原生模块,可以向JS传递事件而不需要直接的调用,就像之前介绍的EventEmiter。而原生模块是通过RCTDeviceEventEmitter,来向JS传递事件。

在原生模块中:

image.png

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

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

image.png

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

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


这便是三种原生模块与js模块通信以及传递数据的几种方式。

这三种方式的优缺点:

通过Callbacks和Promises的方式 ,JS模块调用一次,原生模块传递一次,只能传递一次。

通过发送事件的方式 ,原生模块主动传递,JS模块被动接收,可多次传递。

转载自http://www.devio.org/2016/09/29/React-Native%E5%8E%9F%E7%94%9F%E6%A8%A1%E5%9D%97%E5%90%91JS%E4%BC%A0%E9%80%92%E6%95%B0%E6%8D%AE%E7%9A%84%E5%87%A0%E7%A7%8D%E6%96%B9%E5%BC%8F/

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容