《React-Native系列》3RN与native交互之CallbackPromise

Posted 2020-10-07 緈諨の約錠

接着上一篇《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界面调用原生界面

 

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

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