【React Native开发】React Native 进阶之原生混合与数据通信开发详解-适配iOS开发(61)

【React Native开发】React Native 进阶之原生混合与数据通信开发详解-适配iOS开发(61)

2016/06/06 | React
Native技术文章 | Sky丶清| 15
条评论 | 10303 views

尊重版权,未经授权不得转载

本文来自:江清清的技术专栏(http://www.lcode.org)

(一)前言

今天我们来看一下React Native iOS开发中,React界面和原生iOS混合开发以及数据相互传输详解。

刚创建的React Native交流6群:426762904,欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!

[特别提醒].在看本文章之前，首先确定自己已经学过我的博客另外两节内容了:

1.1.React Native进阶之原生模块封装基础篇详解-适配iOS开发

1.2.React Native进阶之原生模块封装特性篇详解-适配iOS开发

从现阶段RN的发展程度来看，RN和原生混合开发模式是比较理想的，所以我们非常有必要讲解一下RN和原生混合的开发模式，同时里边有关的数据交互通信知识点也有必要讲解一下啦。那么现在我们来一起看一下该怎么样去实现。本篇主要会讲解如下几部分内容:①.React Native访问调用iOS方法,②.iOS访问调用React Native,③.原生界面跳转RN界面。本文章讲解是是适配iOS平台开发的，如果你需要看Android部分的请移步：http://www.lcode.org/?p=1689

本文章实例项目地址:https://github.com/jiangqqlmj/hunheDemo

(二).原生界面跳转RN界面

现阶段混合开发中，一般就是在原有原生项目基础上面添加RN开发的页面。那么这边我们讲解一下从原生界面跳转到RN页面的方法。其实是非常简单的，就是普通push一个ViewController即可，在新打开的ViewController中加入RCTRootView视图，具体承载RN页面的控制器的代码如下:

?

(三).React Native访问调用iOS原生方法

要实现这个功能，我们首先需用创建一个实现"RCTBridgeModule"协议的RNBridgeModule桥接类，看一下RNBridgeModule.h文件

?
接着我们需要在RNBridgetModule的实现类中，实现RCT_EXPORT_MODULE()宏定义，括号参数不填为默认桥接类的名称，也可以自定义填写。该名称用来指定在JavaScript中访问这个模块的名称。

3.1.使用Callback进行回调

接下来我们在RNBridgeModule.m文件中添加如下的方法:

?
根据之前的文章讲过，如果原生的方法要被JavaScript进行访问，那么该方法需要使用RCT_EXPORT_METHOD()宏定义进行声明。该声明的RNInvokeOCCallBack方法有两个参数:第一个参数代表从JavaScript传过来的数据,第二个参数是回调方法，通过该回调方法把原生信息发送到JavaScript中。其中上面的callback方法中传入一个参数数组，其实该数组的第一个参数为一个NSError对象，如果没有错误返回null，其余的数据作为该方法的返回值回调给JavaScritp。

最后我们需要在JavaScript文件中进行定义导出在原生封装的模块，然后调用封装方法访问即可:

?
3.2.使用Promise进行回调

上面讲解过了JavaScript调用iOS原生方法，但是数据回调是通过Callback的，这边我在讲解一下使用Promise进行回调的方法。来我们在

RNBridgetModule的实现类添加如下的方法代码:

?
这边定义了RNInvokeOCPromise方法，该会有三个参数:

dictionary:JavaScript传入的数据
resolve:成功,回调数据
reject:失败,回调数据

其中resove方法传入具体的成功信息即可，但是reject方法必须传入三个参数分别为,错误代码code ,错误信息message以及NSError对象。最终看一下JavaScript中的调用方式:

?

(四).iOS原生访问调用React Native

如果我们需要从iOS原生方法发送数据到JavaScript中，那么可以使用eventDispatcher。首先我们需要在RCTBridgeModule实现中中引入:

?
接下来通过iOS OC原生代码进行访问JavaScript了

?
看上面的sendAppEventWithName方法包含二个参数:

第一个参数:EventReminder自定义一个事件名称
第二个参数:具体传入JavaScrtipt的数据信息

下面来看一下该调用的方法的具体代码:

?
最后在JavaScript端进行调用的方法如下:

?
如上的代码,首先通过导入NativeAppEventEmitter模块，使用该模块在JavaScript代码中进行注册订阅相应的事件。然后我们在生命周期方法componentDidMount()方法中使用addListener()方法进行添加订阅事件。有订阅当然有取消订阅，所以我们在componentWillUnmount()方法中使用remove()方法进行取消即可。

(五).实战实例

上面我们已经把JavaScript和iOS原生代码的相互访问调用以及原生界面打开RN界面都初步的讲解了一遍，下面我们来通过具体实例来演示一下效果(这边也只是贴出来主要代码，详细代码大家可以移步:https://github.com/jiangqqlmj/hunheDemo):

5.1.原生封装模块RCTBridgeModule.m代码

?
5.2.前端index.ios.js代码如下:

?
5.3.运行效果图





(六)最后总结

今天我们主要学习一下React Native iOS开发中,RN和原生iOS混合开发以及数据相互传输详解。

刚创建的React Native交流6群:426762904,欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!

本文章实例项目地址:https://github.com/jiangqqlmj/hunheDemo

尊重原创，未经授权不得转载：From Sky丶清（http://www.lcode.org/） 侵权必究！

关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注，第一时间推送精彩文章)





关注我的微博，可以获得更多精彩内容