查看: 973|回复: 0

[手机开发] Android React Native原生模块与JS模块通信的方法总结

发表于 2017-8-1 08:00:04
尚学堂AD

Android React Native原生模块与JS模块通信的方法总结

前言:

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

方式一:通过Callbacks的方式

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

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

在原生模块中:

  1. public class RNTestModule extends ReactContextBaseJavaModule{
  2. public RNTestModule(ReactApplicationContext reactContext) {
  3. super(reactContext);
  4. }
  5. @Override
  6. public String getName() {
  7. return "RNTest";
  8. }
  9. @ReactMethod
  10. public void measureLayout(
  11. int tag,
  12. int ancestorTag,
  13. Callback errorCallback,
  14. Callback successCallback) {
  15. try {
  16. measureLayout(tag, ancestorTag, mMeasureBuffer);
  17. map.putDouble("relativeX",1);
  18. map.putDouble("relativeY", 1);
  19. map.putDouble("width", 2);
  20. map.putDouble("height",3);
  21. successCallback.invoke(relativeX, relativeY, width, height);
  22. } catch (IllegalViewOperationException e) {
  23. errorCallback.invoke(e.getMessage());
  24. }
  25. }
复制代码

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

在JS模块中:

  1. RNTest.measureLayout(
  2. 100,
  3. 100,
  4. (msg) => {
  5. console.log(msg);
  6. },
  7. (x, y, width, height) => {
  8. console.log(x + ':' + y + ':' + width + ':' + height);
  9. }
  10. );
复制代码

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

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

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

方式二:通过Promises的方式

Promises是ES6的一个新的特性,在React Native中你会看到Promises的大量使用。

原生模块也是支持Promises的,这对喜欢使用Promises的小伙伴则是一个很好的消息。

在原生模块中:

  1. public class RNTestModule extends ReactContextBaseJavaModule{
  2. public RNTestModule(ReactApplicationContext reactContext) {
  3. super(reactContext);
  4. }
  5. @Override
  6. public String getName() {
  7. return "RNTest";
  8. }
  9. @ReactMethod
  10. public void measureLayout(
  11. int tag,
  12. int ancestorTag,
  13. Promise promise) {
  14. try {
  15. WritableMap map = Arguments.createMap();
  16. map.putDouble("relativeX",1);
  17. map.putDouble("relativeY", 1);
  18. map.putDouble("width", 2);
  19. map.putDouble("height",3);
  20. promise.resolve(map);
  21. } catch (IllegalViewOperationException e) {
  22. promise.reject(e);
  23. }
  24. }
  25. }
复制代码

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

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

在JS模块中:

  1. async test() {
  2. try {
  3. var {
  4. relativeX,
  5. relativeY,
  6. width,
  7. height,
  8. } = await RNTest.measureLayout(100, 100);
  9. console.log(relativeX + ':' + relativeY + ':' + width + ':' + height);
  10. } catch (e) {
  11. console.error(e);
  12. }
  13. }
复制代码

在上述代码中,通过ES7的新特性async/await来修饰了test方法,来以同步方式调用原生模块的measureLayout方法,如果原生模块处理成功,

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

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

  1. test2(){
  2. RNTest.measureLayout(100,100).then(e=>{
  3. console.log(e.relativeX + ':' + e.relativeY + ':' + e.width + ':' + e.height);
  4. this.setState({
  5. relativeX:e.relativeX,
  6. relativeY:e.relativeY,
  7. width:e.width,
  8. height:e.height,
  9. })
  10. }).catch(error=>{
  11. console.log(error);
  12. });
  13. }
复制代码

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

上述两种方式,通过Callbacks的方式与通过Promises的方式,都可以向JS模块传递数据,但都是只能传递一次。

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

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

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

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

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

在原生模块中:

  1. @Override
  2. public void onHandleResult(String barcodeData) {
  3. WritableMap params = Arguments.createMap();
  4. params.putString("result", barcodeData);
  5. sendEvent(getReactApplicationContext(), "onScanningResult", params);
  6. }
  7. private void sendEvent(ReactContext reactContext,String eventName, @Nullable WritableMap params) {
  8. reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
  9. .emit(eventName, params);
  10. }
复制代码

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

在JS模块中:

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

  1. componentDidMount() {
  2. //注册扫描监听
  3. DeviceEventEmitter.addListener('onScanningResult',this.onScanningResult);
  4. }
  5. onScanningResult = (e)=> {
  6. this.setState({
  7. scanningResult: e.result,
  8. });
  9. // DeviceEventEmitter.removeListener('onScanningResult',this.onScanningResult);//移除扫描监听
  10. }
复制代码

在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模块被动接收 可多次传递

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!



回复

使用道具 举报