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

React 前端之家
前端之家收集整理的这篇文章主要介绍了【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页面的控制器的代码如下:

?
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];
self.title=@ "RN界面" ;
NSURL *jsCodeLocation=[NSURL URLWithString:@ "http://localhost:8081/index.ios.bundle?platform=ios&dev=true" ];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@ "hunheDemo"
initialProperties:nil
launchOptions:nil];
self.view=rootView;
}
@end
(三).React Native访问调用iOS原生方法

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

5
import <Foundation/Foundation.h>
"RCTBridgeModule.h"
@interface RNBridgeModule : NSObject<RCTBridgeModule>
@end

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

3.1.使用Callback进行回调

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

6
//RN传参数调用原生OC,并且返回数据给RN 通过CallBack
RCT_EXPORT_METHOD(RNInvokeOCCallBack:(NSDictionary *)dictionary callback:(RCTResponseSenderBlock)callback){
NSLog(@ "接收到RN传过来的数据为:%@" ,dictionary);
NSArray *events = [[NSArray alloc] initWithObjects:@ "张三" "李四" callback(@[[NSNull null ],events]);
}

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

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

14
var { NativeModules } = require( 'react-native' );
var RNBridgeModule=NativeModules.RNBridgeModule;
RNBridgeModule.RNInvokeOCCallBack(
{ 'name' : 'jiangqq' 'description' 'http://www.lcode.org' },
(error,events)=>{
if (error){
console.error(error);
} else {
this .setState({events:events});
}
}
)
3.2.使用Promise进行回调

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

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

12
RCT_EXPORT_METHOD(RNInvokeOCPromise:(NSDictionary *)dictionary resolver:(RCTPromiseResolveBlock)resolve
rejecter:(RCTPromiseRejectBlock)reject){
NSString *value=[dictionary objectForKey:@ "name" ];
([value isEqualToString:@ "jiangqq" ]){
resolve(@ "回调成功啦,Promise..." );
{
NSError *error=[NSError errorWithDomain:@ "传入的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];
reject(@ "100" }
这边定义了RNInvokeOCPromise方法，该会有三个参数:

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

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

var RNBridgeModule=NativeModules.RNBridgeModule;
//获取Promise对象处理
async _updateEvents(){
try {
var events=await RNBridgeModule.RNInvokeOCPromise({ 'jiangqqlmj' });
.setState({events});
catch (e){
.setState({events:e.message});
}
(四).iOS原生访问调用React Native

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

3
"RCTBridge.h"
"RCTEventDispatcher.h"
@synthesize bridge = _bridge;

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

1
self.bridge.eventDispatcher sendAppEventWithName:@ "EventReminder" body:@{@ :[NSString stringWithFormat:@ "%@" "errorCode" :@ "0" "msg" "成功" }];

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

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

9
//OC调用RN
RCT_EXPORT_METHOD(VCOpenRN:(NSDictionary *)dictionary){
];
]){
[self.bridge.eventDispatcher sendAppEventWithName:@ }];
"输入的name不是jiangqq" }];
}
最后在JavaScript端进行调用的方法如下:

15
16
17
18
19
20
{ NativeAppEventEmitter } from ;
componentDidMount(){
console.log( '开始订阅通知...' );
subscription = NativeAppEventEmitter.addListener(
'EventReminder' (reminder) => {
let errorCode=reminder.errorCode;
(errorCode=== 0 ){
.setState({msg:reminder.name});
{
.setState({msg:reminder.msg});
}
}
);
}
componentWillUnmount(){
subscription.remove();
如上的代码,首先通过导入NativeAppEventEmitter模块，使用该模块在JavaScript代码中进行注册订阅相应的事件。然后我们在生命周期方法componentDidMount()方法中使用addListener()方法进行添加订阅事件。有订阅当然有取消订阅，所以我们在componentWillUnmount()方法中使用remove()方法进行取消即可。

(五).实战实例

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

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

20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
@H_301_793@ 48
49
50
51
52
//
// RNBridgeModule.m
// hunheDemo
//
// Created by 江清清 on 16/6/5.
// Copyright © 2016年 Facebook. All rights reserved.
//
"RNBridgeModule.h"
"RCTBridge.h"
"RCTEventDispatcher.h"
RNBridgeModule
bridge = _bridge;
RCT_EXPORT_MODULE(RNBridgeModule)
RCT_EXPORT_METHOD(RNInvokeOCCallBack:(NSDictionary *)dictionary callback:(RCTResponseSenderBlock)callback){
}
RCT_EXPORT_METHOD(RNInvokeOCPromise:(NSDictionary *)dictionary resolver:(RCTPromiseResolveBlock)resolve
rejecter:(RCTPromiseRejectBlock)reject){
];
]){
);
{
userInfo:nil];
}
}
//RN跳转原生界面
//RCT_EXPORT_METHOD(RNOpenVC:(NSString *)msg){
// NSLog(@"RN传入原生界面的数据为:%@",msg);
// [[NSNotificationCenter defaultCenter]postNotificationName:@"RNOpenVC" object:nil];
//}
//OC调用RN
RCT_EXPORT_METHOD(VCOpenRN:(NSDictionary *)dictionary){
];
]){
}];
{
}];
}
}
5.2.前端index.ios.js代码如下:

52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
@H_404_1070@ 90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React,{ Component } from 'react' ;
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableHighlight
} from 'react-native' ;
var { NativeModules } = require( );
RNBridgeModule=NativeModules.RNBridgeModule;
import { NativeAppEventEmitter } from ;
subscription; //订阅者
class CustomButton extends Component {
render() {
return (
<TouchableHighlight
style={styles.button}
underlayColor= "#a5a5a5"
onPress={ this .props.onPress}>
<Text style={styles.buttonText}>{ .props.text}</Text>
</TouchableHighlight>
);
}
}
class hunheDemo extends Component {
constructor(props){
super (props);
.state={
events: '' msg: }
}
//获取Promise对象处理
async _updateEvents(){
try {
events=await RNBridgeModule.RNInvokeOCPromise({ 'name' : 'jiangqqlmj' });
.setState({events});
} catch (e){
.setState({events:e.message});
}
}
componentDidMount(){
console.log( '开始订阅通知...' );
subscription = NativeAppEventEmitter.addListener(
'EventReminder' (reminder) => {
let errorCode=reminder.errorCode;
if (errorCode===0){
.setState({msg:reminder.name});
else {
.setState({msg:reminder.msg});
}
}
);
}
componentWillUnmount(){
subscription.remove();
}
render() {
(
<View style={{marginTop:20}}>
<Text style={styles.welcome}>
混合与RN,iOS通信实例讲解
</Text>
<Text style={{margin:20}}>
来自:江清清的技术专栏(http: //www.lcode.org)
</Text>
<Text style={{margin:5}}> '返回数据为:' +{ .state.events}</Text>
<CustomButton text= 'RN调用iOS原生方法_CallBack回调'
onPress={()=>{RNBridgeModule.RNInvokeOCCallBack(
{ 'jiangqq' 'description' 'http://www.lcode.org' (error){
console.error(error);
{
.setState({events:events});
}
})}}
/>
'RN调用iOS原生方法_Promise回调'
onPress={()=> ._updateEvents()}
/>
<Text style={{margin:20}}>
.state.msg}
</Text>
'iOS调用访问React Native'
onPress={()=>RNBridgeModule.VCOpenRN({ })}
/>
</View>
);
}
}
const styles = StyleSheet.create({
welcome: {
fontSize: 20,
textAlign: 'center' 502_1632@ margin: 10,
button: {
margin:5,
backgroundColor: 'white' padding: 10,
borderWidth: 1,
borderColor: '#facece' });
AppRegistry.registerComponent( 'hunheDemo' 5.3.运行效果图

(六)最后总结

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

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

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

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

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

原文链接：https://www.f2er.com/react/304784.html

猜你在找的React相关文章

react使用moment进行日期格式化
导入moment 使用方式 年月日，时分秒 星期几 相对时间 7天后 2小时后 明天 将毫秒转换成年...
推荐使用并手写实现redux-actions原理
@ 一、前言 为什么介绍redux-actions呢? 第一次见到主要是接手公司原有的项目，发现有之前...
【译】值得推荐的十大React Hook 库
十大React Hook库 原文地址：https://dev.to/bornfightcompany/top-10-react-hook-librari...
React生命周期
React生命周期 React的生命周期从广义上分为挂载、渲染、卸载三个阶段，在React的整个生命...
React虚拟DOM的理解
React虚拟DOM的理解 Virtual DOM是一棵以JavaScript对象作为基础的树，每一个节点可以将其...
使用react-native-vector-icons（RN0.6+）
1.安装 npm install --save react-native-vector-icons or yarn add react-native-vector-...
React中的Props, State 与 render 函数
React 的核心特性总结 1、React：声明式开发 (JS或者jQuery属性命令式开发） 2、可以与其他...
React开发环境准备
react fiber 指react 16以上的版本 引入react的方式： 1、引入.js文件 2、使用脚手架工具（...
React组件拆分与传值
组件拆分与组件之间的传值 父子组件的概念： 父组件通过属性的方式，向自组件传值 子组件通...
React组件的简单演示
src/Test.js import React from &#39;react&#39;; function Test() { return ( &a...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作