REACT NATIVE(JS/ES)与IOS(OBJECT-C)交互通信

React 前端之家
前端之家收集整理的这篇文章主要介绍了REACT NATIVE(JS/ES)与IOS(OBJECT-C)交互通信，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
本站文章均为 李华明Himi 原创,转载务必在明显处注明：
转载自【黑米GameDev街区】 原文链接: http://www.himigame.com/react-native/2301.html

一用到跨平台的引擎必然要有引擎与各平台原生进行交互通信的需要。那么Himi先讲解React Native与iOS之间的通信交互。

本篇主要分为两部分讲解：(关于其中讲解的OC语法等不介绍，不懂的请自行学习)

1. React Native 访问iOS

2. iOS访问React Native

一：React Native 访问iOS

1.我们想要JS调用OC函数，就要实现一个“RCTBridgeModule”协议的Objective-C类

所以首先我们先创建一个oc新类， Himi这里起名为：TestOJO (O: object-c,J:JavaScript)

2. TestOJO.h

引入：#import “RCTBridgeModule.h” 且使用<RCTBridgeModule> 接口，

3.为了实现RCTBridgeModule协议，类需要包含RCT_EXPORT_MODULE()宏(这个宏也可以添加一个参数用来指定在Javascript中访问这个模块的名字。如果你不指定，默认就会使用这个Objective-C类的名字。)

4. 在TestOJO.m中添加如下：

想要将oc的函数导出给js进行调用，那么就需要进行声明。声明通过RCT_EXPORT_METHOD()宏来实现：

j2oFun1：函数名，后续是两个参数，分别是NSString 和 int 类型数据。

调用成功后，我们输出这两个传来的值到控制台。

注意：Javascript调用的OC函数，此函数返回值类型必须是void。由于React Native的桥接操作是异步的，所以要返回结果给Javascript，必须通过回调参数进行 后续详细讲解。

从js传来的参数我们可以依靠自动类型转换的特性，跳过手动的类型转换（RCTConvert，下面详细介绍），在定义函数参数类型时，直接写上对应想要的数据类型，例如NSData等。

5. 下面看js调用的代码段：

var TestOJO=require(‘react-native’).NativeModules.TestOJO;（将OC注册进来的模块取出）

TestOJO.j2oFun1(‘Himi’,12321);(调用模块中的对应函数，且将参数进行传入)

6. 我们来看一段复杂的数据通信

OC 代码段（导出函数）：

7
8
9
10
11
12
13
#import "RCTConvert.h"
j2oFun2 NSDictionary details )
{
*name = [ RCTConvert NSString :details [ @"name" ] ;
NSNumber *age NSNumber @"age" ;
NSArray * array = NSArray @"array" ;
@"js call iOS function j2oFun2\n name: %@ | age :%@" Crayon-sy" style="margin:0px; padding:0px; border:0px; font-style:inherit; height:inherit; font-size:inherit!important; line-height:inherit!important; color:rgb(51, name [ age stringValue ;
for int i 0 ; i < array count ++ ) {
@"array: 第%d个元素:%@" i array [ ;
}
}

需要注意的是，引入了”RCTConvert”类,作用：

RCTConvert提供了一系列辅助函数，用来接收一个JSON值并转换到原生Objective-C类型或类。

JS代码段：（调用OC函数）

7. 我们下面来利用回调参数来得到访问OC的函数得到其返回值

j2oCallbackEvent jsString callback RCTResponseSenderBlock callback )
{
@"js call iOS function:j2oCallbackEvent \n jsString:%@" jsString ;
*events [ alloc ] initWithObjects : @"Himi" Crayon-sy" style="margin:0px; padding:0px; border:0px; font-style:inherit; height:inherit; font-size:inherit!important; line-height:inherit!important; color:rgb(51, @"12321" nil ;
callback @ NSNull null events ;
}

RCTResponseSenderBlock 是种特殊的参数类型——回调函数，通过此参数可以实现当JS访问的OC函数后，并能将此OC函数的返回值传递给JS。

RCTResponseSenderBlock 只接受一个参数（传递给JavaScript回调函数的参数数组）

callback函数：第一个参数是一个错误对象（没有发生错误的时候为null），而剩下的部分是函数的返回值。

下面我们来看JS调用代码段：

二：iOS访问React Native

1. 我们如果想要OC访问JS，给JavaScript发送事件通知，我们需要使用RCTEventDispatcher的函数，与RCTBridge的实例

因此我们需要先做准备，TestOJO.h：

3
#import "RCTEventDispatcher.h"
@synthesize bridge _bridge ;

bridge: 是RCTBridge 的实例，且在我们使用的接口RCTBridgeModule中。

OC访问JS的代码段：

第一个参数：事件名

第二个参数(body)：传入的参数

其中@{}是定义不可变的字典的快捷实例方式，因此我们也可以改成如下形式：

direct { @"name" : @"age" @ 12 } ;
[ self . bridge eventDispatcher sendAppEventWithName @"eventName" body :direct ;

下面来看JS中定义OC调用的函数：

其实所谓OC能响应JS，是JS进行了对应函数的绑定监听。因此我们需要利用NativeAppEventEmitter 组件，利用其addListener进行注册监听！因此我们需要引入进来这个模块，

var o2cFun : 将绑定好的监听事件引用交给此变量保存。

addListener：

第一个参数：事件名

第二个参数：响应函数

注意：利用addListener进行监听，一定要对应有取消监听！要保持一一对应的好习惯。

且通常取消监听都在componentWillUnmount函数中进行。如下：

其中对于原理并没有详细的介绍，这里推荐两篇文章，童鞋们可以详细的阅读一下，这里不赘述：

http://www.jianshu.com/p/203b91a77174

http://reactnative.cn/docs/0.21/native-modules-ios.html#content

下面给出源码：

TestOJO.h：

TestOJO.m：

13
14
15
16
17
18
19
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
48
49
50
51
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
//
//TestOJO.m
//MyProject
//
//Created by Himi on 16/6/2.
//Copyright © 2016年 Facebook. All rights reserved.
//
#import "TestOJO.h"
//RCTConvert类支持的的类型也都可以使用,RCTConvert还提供了一系列辅助函数，用来接收一个JSON值并转换到原生Objective-C类型或类。
#import "RCTConvert.h"
//本地模块也可以给JavaScript发送事件通知。最直接的方式是使用eventDispatcher
#import "RCTEventDispatcher.h"
@H_416_1403@ @implementation TestOJO
//====================================[JS ->OC]=======================================
;
//桥接到Javascript的方法返回值类型必须是void。React Native的桥接操作是异步的，所以要返回结果给Javascript，必须通过回调或者触发事件来进行
)
{
;
}
)
{
;
;
@H_403_1460@ ;
;
{
;
}
}
//带回调函数 RCTResponseSenderBlock ，提供将返回值传回给js
//RCTResponseSenderBlock 只接受一个参数->传递给JavaScript回调函数的参数数组
)
{
;
;
;
}
//====================================[OC ->JS]=======================================
;
//此函数是为了测试OC->JS过程，触发事件的函数
( emitterO2J )
{
self ocCallJsFun ;
}
- void ocCallJsFun
{
;
;
//[self.bridge.eventDispatcher sendAppEventWithName:@"eventName" body:@{@"name":@"Himi",@"age": @12}];
}
@end

Main.js:

下面是运行效果：（点击看动态图，主要看演示过程与控制台输出哦！）

注意：

1.点击JS->OC 后，会调用三个函数哦

2.点击JS->OC->JS,先是通过JS->OC的临时函数，触发OC->JS的过程！

原文链接：https://www.f2er.com/react/304769.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橱窗无缝滚动轮播色块碰撞组件销毁文档操作