《React-Native系列》3、RN与native交互之Callback、Promise
接着上一篇《React-Native系列》RN与native交互与数据传递,我们接下来研究另外的两种RN与Native交互的机制
一、Callback机制
首先Calllback是异步的,RN端调用Native端,Native会callback,但是时机是不确定的,如果多次调用的话,会存在问题。
Naive端是无法主动通过回调函数向RN端发送消息的。
具体实现代码如下:
Native端暴露好接口
- @ReactMethod
- public 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
等待态(Pending)
处于等待态时,promise 需满足以下条件:
- 可以迁移至完成态或拒绝态
- 不能迁移至其他任何状态
- 必须拥有一个不可变的终值
拒绝态(Rejected)
处于拒绝态时,promise 需满足以下条件:
- 不能迁移至其他任何状态
- 必须拥有一个不可变的据因
在Native侧,暴露接口:
- @ReactMethod
- public 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);
- }
- );
- }
- }
引用原文:http://blog.csdn.net/codetomylaw/article/details/51927126
参考文章: React界面调用原生界面
写博客是为了记住自己容易忘记的东西,另外也是对自己工作的总结,文章可以转载,无需版权。希望尽自己的努力,做到更好,大家一起努力进步!
如果有什么问题,欢迎大家一起探讨,代码如有问题,欢迎各位大神指正!
《React-Native系列》3、RN与native交互之Callback、Promise的更多相关文章
- 《React-Native系列》RN与native交互与数据传递
RN怎么与native交互的呢? 下面我们通过一个简单的Demo来实现:RN页面调起Native页面,Native页面选择电话本数据,将数据回传给RN展示. 首先是 Native侧 1.MainAct ...
- C++的性能C#的产能?! - .Net Native 系列五:.Net Native与反射
此系列系小九的学堂原创翻译,翻译自微软官方开发向导,一共分为六个主题.本文是第五个主题:.Net Native与反射. 向导文链接:<C++的性能C#的产能?! - .Net Native 系列 ...
- 【REACT NATIVE 系列教程之十二】REACT NATIVE(JS/ES)与IOS(OBJECT-C)交互通信
http://blog.csdn.net/xiaominghimi/article/details/51586492 一用到跨平台的引擎必然要有引擎与各平台原生进行交互通信的需要.那么Himi先讲解R ...
- C++的性能C#的产能?! - .Net Native 系列四:性能测试方法(PerfView)
之前一文<c++的性能, c#的产能?!鱼和熊掌可以兼得,.NET NATIVE初窥> 获得很多朋友支持和鼓励,也更让我坚定做这项技术的推广者,希望能让更多的朋友了解这项技术,于是先从官方 ...
- C++的性能C#的产能?! - .Net Native 系列《三》:.NET Native部署测试方案及样例
之前一文<c++的性能, c#的产能?!鱼和熊掌可以兼得,.NET NATIVE初窥> 获得很多朋友支持和鼓励,也更让我坚定做这项技术的推广者,希望能让更多的朋友了解这项技术,于是先从官方 ...
- C++的性能C#的产能?! - .Net Native 系列向导
之前一文<c++的性能, c#的产能?!鱼和熊掌可以兼得,.NET NATIVE初窥> 获得很多朋友支持和鼓励,也更让我坚定做这项技术的推广者,希望能让更多的朋友了解这项技术,于是先从官方 ...
- C++的性能C#的产能?! - .Net Native 系列《二》:.NET Native开发流程详解
之前一文<c++的性能, c#的产能?!鱼和熊掌可以兼得,.NET NATIVE初窥> 获得很多朋友支持和鼓励,也更让我坚定做这项技术的推广者,希望能让更多的朋友了解这项技术,于是先从官方 ...
- C++的性能C#的产能?! - .Net Native 系列《一》:.NET Native安装和配置
之前一文<c++的性能, c#的产能?!鱼和熊掌可以兼得,.NET NATIVE初窥> 获得很多朋友支持和鼓励,也更让我坚定做这项技术的推广者,希望能让更多的朋友了解这项技术,于是先从官方 ...
- 不可或缺 Windows Native 系列文章索引
[源码下载] 不可或缺 Windows Native 系列文章索引 作者:webabcd 1.不可或缺 Windows Native (1) - C 语言: hello c 介绍不可或缺 Window ...
随机推荐
- jQuery ajax 动态append创建表格出现不兼容ie8
非常多情况下.通过js(jQuery1.10)动态来创建一些样式,对页面的动态交互来说是非常方便的 可是不同的浏览器针对动态生成的不是非常兼容,在此遇见的不兼容ie8.跟各位分享下 代码: json数 ...
- JavaScript------Throw和Try-Catch的使用
function test() { try { var x = document.getElementById("demo").value; if (x == "&quo ...
- MVC [Control与View交互]
<1> Home控制器 using System; using System.Collections.Generic; using System.Data; using System.Da ...
- 【BZOJ4566】[Haoi2016]找相同字符 后缀数组+单调栈
[BZOJ4566][Haoi2016]找相同字符 Description 给定两个字符串,求出在两个字符串中各取出一个子串使得这两个子串相同的方案数.两个方案不同当且仅当这两 个子串中有一个位置不同 ...
- 穿透Session 0 隔离(二)
上一篇我们已经对Session 0 隔离有了进一步认识,如果在开发过程中确实需要服务与桌面用户进行交互,可以通过远程桌面服务的API 绕过Session 0 的隔离完成交互操作. 对于简单的交互,服务 ...
- Spoken English Practice(I'm gonna do something I never thought I'd be able to)
绿色:连读: 红色:略读: 蓝色:浊化: 橙色:弱读 下划线_为浊化 口语蜕变(2017/7/6) 英 ...
- angular.js记录
http://www.runoob.com/angularjs/angularjs-tutorial.html 第一部分:快速上手1.1 angularJS四大核心特性1.2 自己动手搭建开发,调试, ...
- 在容器最前面添加DOM元素 parent.insertBefore(new, parent.children[0])
//判断容器当前有没有子级元素,如果没有直接appendChild就行了; if (p.children[0]) { p.insertBefore(span, p.children[0]); } el ...
- php smarty模板引擎
<?php /* 一.什么是smarty? smarty是一个使用PHP写出来的模板PHP模板引擎,它提供了逻辑与外在内容的分离,简单的讲, 目的就是要使用PHP程序员同美工分离,使用的程序员改 ...
- Css选择器定位详解
1.使用 class 属性来定位元素,方法如下: driver.findElement(By.cssSelector("input.login")); 即可以先指定一个 HTML的 ...