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

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

一、Callback机制

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

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

具体实现代码如下：

Native端暴露好接口

    @ReactMethodpublic void measureLayout(Callback errorCallback,Callback successCallback){try {successCallback.invoke(100, 100, 200, 200);//调用回调函数，返回结果} catch (IllegalViewOperationException e) {errorCallback.invoke(e.getMessage());}}

在RN端：

<Text style={{ fontSize: 25 }} onPress={this.CallAndroid_callback} >调用原生方法_使用_回调函数</Text>CallAndroid_callback = () => {NativeModules.MyNativeModule.measureLayout((msg) => {console.log(msg);},(x, y, width, height) => {console.log(x + '坐标,' + y + '坐标,' + width + '宽,' + height + '高');});}

二、promise机制

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

Promise 的状态

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

等待态（Pending）

处于等待态时，promise 需满足以下条件：

可以迁移至完成态或拒绝态

完成态（Fulfilled）

处于完成态时，promise 需满足以下条件：

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

拒绝态（Rejected）

处于拒绝态时，promise 需满足以下条件：

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

在Native侧，暴露接口：

    @ReactMethodpublic void rnCallNative_promise(String msg, Promise promise) {try {//业务逻辑处理Toast.makeText(mContext, msg, Toast.LENGTH_SHORT).show();String componentName = getCurrentActivity().getComponentName().toString();promise.resolve(componentName);}catch (Exception e){promise.reject("100",e.getMessage());//promise 失败}}

在RN侧：

<Text style={{ fontSize: 25 }} onPress={this.CallAndroid_promise} >调用原生方法_使用_Promise</Text>CallAndroid_promise = () => {NativeModules.MyNativeModule.rnCallNative_promise('rn调用原生模块的方法-成功啦').then((msg) => {console.log('promise成功：'+msg);}).catch((err) => {console.log(err);});}
}

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

【REACT NATIVE 系列教程之十二】REACT NATIVE(JS/ES)与IOS(OBJECT-C)交互通信
一用到跨平台的引擎必然要有引擎与各平台原生进行交互通信的需要.那么Himi先讲解React Native与iOS之间的通信交互. 本篇主要分为两部分讲解:(关于其中讲解的OC语法等不介绍,不懂的请自行 ...
《React-Native系列》2、RN与native交互与数据传递
RN怎么与native交互的呢? 下面我们通过一个简单的Demo来实现:RN页面调起Native页面,Native页面选择电话本数据,将数据回传给RN展示. 首先是 Native侧 1.MainAct ...
【REACT NATIVE 系列教程之十三】利用LISTVIEW与TEXTINPUT制作聊天/对话框获取组件实例常用的两种方式...
本站文章均为李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/react-native/2346.html ...
C++的性能C#的产能?! - .Net Native 系列向导
之前一文<c++的性能, c#的产能?!鱼和熊掌可以兼得,.NET NATIVE初窥> 获得很多朋友支持和鼓励,也更让我坚定做这项技术的推广者,希望能让更多的朋友了解这项技术,于是先从官方 ...
RN与Native混合App的路由方案
目录一.纯RN路由二.纯Native路由三.携程 - 混合路由四.橘子 - 混合路由 1. 生命周期的管理 2. iOS侧滑的管理 3. 参数的管理 4. callback的管理 5. 热更新 ...
RN系列文章---RN简介
RN简介: 一简介 React Native是Facebook在F8大会开源的JavaScript框架,(2015年9月15日发布)可以让广大开发者使用JavaScript和React开发跨平台的 ...
RN与原生交互（二）——数据传递
我的上篇文章中简单介绍了RN与原生基本的页面跳转,本篇主要总结RN和原生之间的数据传递方式,讲解RN和原生端之间如何互相传递数据. Demo地址:DataTransfer RN向原生传递数据在上一篇 ...
java native 接口_Java本地接口--Java Native Interface (JNI)
一.方法介绍 java native方法是指本地方法,当在方法中调用一些不是由java语言写的代码或者在方法中用java语言直接操纵计算机硬件时要声明为native方法. java中,通过JNI(Ja ...
native html5 区别,H5与Native优劣对比
即将启动爱奇艺商城(mall.iqiyi.com)移动端的native化. 项目开始之前当然要梳理下为什么做native,究竟H5跟native比有什么劣势,而H5又为什么占比那么高并且有" ...

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

等待态（Pending）

拒绝态（Rejected）

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

最新文章

热门文章