首页 > 其他 > 详细

《React-Native系列》3、RN与native交互之Callback、Promise

时间:2017-09-20 09:15:41      阅读:881      评论:0      收藏:0      [点我收藏+]

接着上一篇《React-Native系列》RN与native交互与数据传递,我们接下来研究另外的两种RN与Native交互的机制

一、Callback机制

首先Calllback是异步的,RN端调用Native端,Native会callback,但是时机是不确定的,如果多次调用的话,会存在问题。

Naive端是无法主动通过回调函数向RN端发送消息的。

具体实现代码如下:

Native端暴露好接口

  1. @ReactMethod  
  2. public void measureLayout(Callback errorCallback,  
  3.                           Callback successCallback){  
  4.     try {  
  5.         successCallback.invoke(100, 100, 200, 200);//调用回调函数,返回结果  
  6.     } catch (IllegalViewOperationException e) {  
  7.         errorCallback.invoke(e.getMessage());  
  8.     }  
  9. }  

在RN端:

  1. <Text style={{ fontSize: 25 }} onPress={this.CallAndroid_callback} >调用原生方法_使用_回调函数</Text>  
  2.   CallAndroid_callback = () => {  
  3.     NativeModules.MyNativeModule.measureLayout(  
  4.       (msg) => {  
  5.         console.log(msg);  
  6.       },  
  7.       (x, y, width, height) => {  
  8.         console.log(x + ‘坐标,‘ + y + ‘坐标,‘ + width + ‘宽,‘ + height + ‘高‘);  
  9.       }  
  10.     );  
  11.   }  

 

二、promise机制

关于ES6中Promise的用法可以参考:http://www.cnblogs.com/lvdabao/p/5320705.html

 

Promise 的状态
一个 Promise 的当前状态必须为以下三种状态中的一种:等待态(Pending)、完成态(Fulfilled)和拒绝态(Rejected)。

等待态(Pending)

处于等待态时,promise 需满足以下条件:

  • 可以迁移至完成态或拒绝态
 
完成态(Fulfilled)
处于完成态时,promise 需满足以下条件:
  • 不能迁移至其他任何状态
  • 必须拥有一个不可变的终值

拒绝态(Rejected)

处于拒绝态时,promise 需满足以下条件:

  • 不能迁移至其他任何状态
  • 必须拥有一个不可变的据因

 

在Native侧,暴露接口:

  1. @ReactMethod  
  2. public void rnCallNative_promise(String msg, Promise promise) {  
  3.   
  4.     try {  
  5.         //业务逻辑处理  
  6.         Toast.makeText(mContext, msg, Toast.LENGTH_SHORT).show();  
  7.         String componentName = getCurrentActivity().getComponentName().toString();  
  8.         promise.resolve(componentName);  
  9.     }catch (Exception e){  
  10.         promise.reject("100",e.getMessage());//promise 失败  
  11.     }  
  12. }  


在RN侧:

 
  1. <Text style={{ fontSize: 25 }} onPress={this.CallAndroid_promise} >调用原生方法_使用_Promise</Text>  
  2.   
  3.   CallAndroid_promise = () => {  
  4.     NativeModules.MyNativeModule.rnCallNative_promise(‘rn调用原生模块的方法-成功啦‘).then(  
  5.       (msg) => {  
  6.         console.log(‘promise成功:‘+msg);  
  7.       }  
  8.     ).catch(  
  9.       (err) => {  
  10.         console.log(err);  
  11.       }  
  12.       );  
  13.   }  
  14. }  

 

引用原文:http://blog.csdn.net/codetomylaw/article/details/51927126

参考文章: React界面调用原生界面

 

写博客是为了记住自己容易忘记的东西,另外也是对自己工作的总结,文章可以转载,无需版权。希望尽自己的努力,做到更好,大家一起努力进步!

如果有什么问题,欢迎大家一起探讨,代码如有问题,欢迎各位大神指正!

《React-Native系列》3、RN与native交互之Callback、Promise

原文:http://www.cnblogs.com/summary-2017/p/7559672.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!