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

接着上一篇《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. try {
  4. //业务逻辑处理
  5. Toast.makeText(mContext, msg, Toast.LENGTH_SHORT).show();
  6. String componentName = getCurrentActivity().getComponentName().toString();
  7. promise.resolve(componentName);
  8. }catch (Exception e){
  9. promise.reject("100",e.getMessage());//promise 失败
  10. }
  11. }

在RN侧:

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

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

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

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

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

时间: 2024-12-06 12:14:33

《React-Native系列》3、RN与native交互之Callback、Promise的相关文章

《React-Native系列》RN与native交互与数据传递

RN怎么与native交互的呢? 下面我们通过一个简单的Demo来实现:RN页面调起Native页面,Native页面选择电话本数据,将数据回传给RN展示. 首先是 Native侧 1.MainActivity package com.rnandroid01; import android.content.Intent; import android.database.Cursor; import android.net.Uri; import android.provider.Contacts

【REACT NATIVE 系列教程之十二】REACT NATIVE(JS/ES)与IOS(OBJECT-C)交互通信

一用到跨平台的引擎必然要有引擎与各平台原生进行交互通信的需要.那么Himi先讲解React Native与iOS之间的通信交互. 本篇主要分为两部分讲解:(关于其中讲解的OC语法等不介绍,不懂的请自行学习) 1. React Native 访问iOS 2. iOS访问React Native     一:React Native 访问iOS 1. 我们想要JS调用OC函数,就要实现一个"RCTBridgeModule"协议的Objective-C类 所以首先我们先创建一个oc新类,  

【REACT NATIVE 系列教程之七】统一ANDROID与IOS两个平台的程序入口&&区分平台的组件简介

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/react-native/2260.html       本篇介绍两个细节:       1. 关于如何将index.android.js 与index.ios.js统一管理起来.       2.  Platform 组件的简单介绍与使用   一:将index.android.js 与index.ios.js统一管理起来. 由于React本身

菜鸟窝React Native 系列教程-1.移动端开发趋势与未来

菜鸟窝React Native 系列教程-1.移动端开发趋势与未来 课程持续更新中..... 我是RichardCao,现任新美大酒店旅游事业群的Android Developer.如果你也有兴趣录制RN视频,请加入下面QQ群找我. 下载地址:https://pan.baidu.com/s/1c1XmE56 密码:shhw 首发地址:菜鸟窝-ReactNative学习板块 交流QQ群:576089067 课程目录:菜鸟窝React Native 系列教程

【REACT NATIVE 系列教程之十三】利用LISTVIEW与TEXTINPUT制作聊天/对话框&&获取组件实例常用的两种方式

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/react-native/2346.html 本篇Himi来利用ListView和TextInput这两种组件实现对话.聊天框. 首先需要准备的有几点:(组件的学习就不赘述了,简单且官方有文档) 1. 学习下 ListView: 官方示例:http://reactnative.cn/docs/0.27/tutorial.html#content

【REACT NATIVE 系列教程之二】创建自定义组件&&导入与使用示例

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/react-native/2219.html 在上一篇  [REACT NATIVE 系列教程之一]触摸事件的两种形式与四种TOUCHABLE组件详解 中的最后介绍了如何使用Touchable的四种组件进行监听触摸事件.  那么紧接着我们利用Touchable来包装一个带图片的Button组件,且设计成可接受很多自定义参数. 一:创建我们自定义

【REACT NATIVE 系列教程之十一】插件的安装、使用与更新(示例:REACT-NATIVE-TAB-NAVIGATOR)

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/react-native/2294.html 本篇主要来详细介绍如何安装.升级插件及讲解一个react-native-tab-navigator的示例. 首先推荐一个插件网站:https://www.npmjs.com     (此插件属于半官方维护的) 本文举例使用的插件:react-native-tab-navigator ,选项卡形式的导

C++的性能C#的产能?! - .Net Native 系列四:性能测试方法(PerfView)

之前一文<c++的性能, c#的产能?!鱼和熊掌可以兼得,.NET NATIVE初窥> 获得很多朋友支持和鼓励,也更让我坚定做这项技术的推广者,希望能让更多的朋友了解这项技术,于是先从官方信息的翻译开始做起. 此系列系小九的学堂原创翻译,翻译自微软官方开发向导,一共分为六个主题.本文是第四个主题:.NET Native性能测试. 向导文链接:<C++的性能C#的产能?! - .Net Native 系列:开发向导> [小九的学堂,致力于以平凡的语言描述不平凡的技术.如要转载,请注明

C++的性能C#的产能?! - .Net Native 系列:.NET Native安装和配置

之前一文<c++的性能, c#的产能?!鱼和熊掌可以兼得,.NET NATIVE初窥> 获得很多朋友支持和鼓励,也更让我坚定做这项技术的推广者,希望能让更多的朋友了解这项技术,于是先从官方信息的翻译开始做起. 此系列系小九的学堂原创翻译,翻译自微软官方开发向导,一共分为六个主题.本文是第一个主题:.NET Native安装和配置. 向导文链接:<C++的性能C#的产能?! - .Net Native 系列:开发向导> [小九的学堂,致力于以平凡的语言描述不平凡的技术.如要转载,请注