【React Native开发】React Native 进阶之原生混合与数据通信开发详解-适配iOS开发(61)
尊重版权,未经授权不得转载
本文来自:江清清的技术专栏(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页面的控制器的代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
#
import
"TwoViewController.h"
"RCTRootView.h"
"ThreeViewController.h"
@implementation
TwoViewController
- (
void
)viewDidLoad {
[
super
viewDidLoad];
@H_502_140@NSURL *jsCodeLocation=[NSURL URLWithString:@
"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"
];
@H_502_140@RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
@H_502_140@moduleName:@
"hunheDemo"
@H_502_140@initialProperties:nil
@H_502_140@launchOptions:nil];
@H_502_140@self.view=rootView;
}
@end
|
(三).React Native访问调用iOS原生方法
要实现这个功能,我们首先需用创建一个实现"RCTBridgeModule"协议的RNBridgeModule桥接类,看一下RNBridgeModule.h文件
<Foundation/Foundation.h>
"RCTBridgeModule.h"
@interface
RNBridgeModule : NSObject<RCTBridgeModule>
@end
接着我们需要在RNBridgetModule的实现类中,实现RCT_EXPORT_MODULE()宏定义,括号参数不填为默认桥接类的名称,也可以自定义填写。该名称用来指定在JavaScript中访问这个模块的名称。
3.1.使用Callback进行回调
根据之前的文章讲过,如果原生的方法要被JavaScript进行访问,那么该方法需要使用RCT_EXPORT_METHOD()宏定义进行声明。该声明的RNInvokeOCCallBack方法有两个参数:第一个参数代表从JavaScript传过来的数据,第二个参数是回调方法,通过该回调方法把原生信息发送到JavaScript中。其中上面的callback方法中传入一个参数数组,其实该数组的第一个参数为一个NSError对象,如果没有错误返回null,其余的数据作为该方法的返回值回调给JavaScritp。
最后我们需要在JavaScript文件中进行定义导出在原生封装的模块,然后调用封装方法访问即可:
'react-native'
);
var RNBridgeModule=NativeModules.RNBridgeModule;
RNBridgeModule.RNInvokeOCCallBack(
if
(error){
this
.setState({events:events});
RCT_EXPORT_METHOD(RNInvokeOCPromise:(NSDictionary *)dictionary resolver:(RCTPromiseResolveBlock)resolve
"传入的name不符合要求,回调失败啦,255)!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; margin:0px!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important"> code:
100
userInfo:nil];