|
加入收藏 |
设为首页 |
会员中心 | 我要投稿
|
李大同 （https://www.lidatong.com.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
REACT NATIVE(JS/ES)与IOS(OBJECT-C)交互通信
发布时间：2020-12-15 07:32:51 所属栏目：百科 来源：网络整理
导读：本站文章均为 李华明Himi 原创,转载务必在明显处注明： 转载自【黑米GameDev街区】 原文链接: http://www.himigame.com/react-native/2301.html 一用到跨平台的引擎必然要有引擎与各平台原生进行交互通信的需要。那么Himi先讲解React Native与iOS之间的通信
本站文章均为
李华明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 <Foundation/Foundation.h>
#import "RCTBridgeModule.h"
@interface
TestOJO
: NSObject
<RCTBridgeModule>
@end
|
引入：#import “RCTBridgeModule.h” 且使用<RCTBridgeModule> 接口，
3.为了实现RCTBridgeModule协议，类需要包含RCT_EXPORT_MODULE()宏(这个宏也可以添加一个参数用来指定在Javascript中访问这个模块的名字。如果你不指定，默认就会使用这个Objective-C类的名字。)
4. 在TestOJO.m中添加如下：
|
|
RCT_EXPORT_MODULE
(
)
;
//桥接到Javascript的方法返回值类型必须是void。React Native的桥接操作是异步的，所以要返回结果给Javascript，必须通过回调或者触发事件来进行
RCT_EXPORT_METHOD
(
j2oFun1
:
(
NSString
*
)
dataString
dateNumber
int
dateNumber
)
{
NSLog
(
@"js call iOS function j2oFun1n dataString: %@ |dateNumber :%d"
,
dataString
;
}
|
想要将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
;
.
j2oFun1
'Himi'
,
12321
;
|
var TestOJO=require(‘react-native’).NativeModules.TestOJO;（将OC注册进来的模块取出）
TestOJO.j2oFun1(‘Himi’,12321);(调用模块中的对应函数，且将参数进行传入)
6. 我们来看一段复杂的数据通信
OC 代码段（导出函数）：
6
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 j2oFun2n name: %@ | age :%@"
name
[
age
stringValue
;
for
int
i
0
;
i
<
array
count
++
)
{
@"array: 第%d个元素:%@"
i
array
[
;
}
}
|
需要注意的是，引入了”RCTConvert”类,作用：
RCTConvert提供了一系列辅助函数，用来接收一个JSON值并转换到原生Objective-C类型或类。
JS代码段：（调用OC函数）
j2oFun2
(
{
name
:
age
:
12
array
:
[
'hi,Himi'
'i,m'
'a array!'
]
}
;
|
7. 我们下面来利用回调参数来得到访问OC的函数得到其返回值
6
j2oCallbackEvent
jsString
callback
RCTResponseSenderBlock
callback
)
{
@"js call iOS function:j2oCallbackEvent n jsString:%@"
jsString
;
*events
[
alloc
]
initWithObjects
:
@"Himi"
@"12321"
nil
;
callback
@
NSNull
null
events
;
}
|
RCTResponseSenderBlock 是种特殊的参数类型——回调函数，通过此参数可以实现当JS访问的OC函数后，并能将此OC函数的返回值传递给JS。
RCTResponseSenderBlock 只接受一个参数（传递给JavaScript回调函数的参数数组）
callback函数：第一个参数是一个错误对象（没有发生错误的时候为null），而剩下的部分是函数的返回值。
下面我们来看JS调用代码段：
j2oCallbackEvent
(
error
callBackEvents
)
=
>
{
if
)
{
console
error
;
}
else
{
Alert
alert
'J2O带返回值'
'数组的三个值：n[0]:'
+
[
0
]
+
'n[1]:'
1
'n[2]:'
2
]
;
}
;
|
二：iOS访问React Native
1. 我们如果想要OC访问JS，给JavaScript发送事件通知，我们需要使用RCTEventDispatcher的函数，与RCTBridge的实例
因此我们需要先做准备，TestOJO.h：
2
3
#import "RCTEventDispatcher.h"
@synthesize
bridge
_bridge
;
|
bridge: 是RCTBridge 的实例，且在我们使用的接口RCTBridgeModule中。
OC访问JS的代码段：
[
self
bridge
eventDispatcher
sendAppEventWithName
@"eventName"
body
@
{
@"name"
@"Himi"
@"age"
:
@
;
|
第一个参数：事件名
第二个参数(body)：传入的参数
其中@{}是定义不可变的字典的快捷实例方式，因此我们也可以改成如下形式：
2
direct
{
@"name"
:
@"age"
@
12
}
;
[
self
.
bridge
eventDispatcher
sendAppEventWithName
@"eventName"
body
:direct
;
|
下面来看JS中定义OC调用的函数：
其实所谓OC能响应JS，是JS进行了对应函数的绑定监听。因此我们需要利用NativeAppEventEmitter 组件，利用其addListener进行注册监听！因此我们需要引入进来这个模块，
import
{
.
.
NativeAppEventEmitter
.
from
;
o2cFun
NativeAppEventEmitter
addListener
(
'eventName'
para
>
'被OC触发'
'字典数据:n name:'
'n age:'
age
)
;
|
var o2cFun : 将绑定好的监听事件引用交给此变量保存。
addListener：
第一个参数：事件名
第二个参数：响应函数
注意：利用addListener进行监听，一定要对应有取消监听！要保持一一对应的好习惯。
且通常取消监听都在componentWillUnmount函数中进行。如下：
componentWillUnmount
{
o2cFun
.
remove
;
}
其中对于原理并没有详细的介绍，这里推荐两篇文章，童鞋们可以详细的阅读一下，这里不赘述：
http://www.jianshu.com/p/203b91a77174
http://reactnative.cn/docs/0.21/native-modules-ios.html#content
下面给出源码：
TestOJO.h：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
//
//TestOJO.h
//MyProject
//
//Created by Himi on 16/6/2.
//Copyright ? 2016年 Facebook. All rights reserved.
//
#import <Foundation/Foundation.h>
#import "RCTBridgeModule.h"
<RCTBridgeModule>
@end
|
TestOJO.m：
12
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"
@implementation
TestOJO
//====================================[JS ->OC]=======================================
;
//桥接到Javascript的方法返回值类型必须是void。React Native的桥接操作是异步的，所以要返回结果给Javascript，必须通过回调或者触发事件来进行
)
{
;
}
)
{
;
;
;
;
{
;
}
}
//带回调函数 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:
|
74
75
|
import
React
{
Component
}
from
'react'
;
import
{
View
Text
StyleSheet
Image
Alert
NativeAppEventEmitter
//引用NativeAppEventEmitter组件进行监听Native端派发的事件
'react-native'
;
var
TestOJO
require
NativeModules
TestOJO
;
o2cFun
addListener
(
'eventName'
para
=
>
alert
'被OC触发'
'字典数据:n name:'
+
name
+
'n age:'
age
)
;
// 千万不要忘记忘记取消订阅,通常在componentWillUnmount函数中实现。
// o2cFun.remove();
export
default
class
Main
extends
Component
{
constructor
props
{
super
;
this
state
{
selectedTab
'home'
;
}
{
;
}
render
{
return
(
<
View
style
{
{
flex
1
alignItems
'center'
}
>
<
Text
styles
himiTextStyle
>
Himi
React
Native
系列教程
<
/
Text
>
Text
onPress
)
>
{
j2oFun1
'Himi'
12321
;
j2oFun2
{
age
:
array
[
'hi,Himi'
'i,m'
'a array!'
]
;
j2oCallbackEvent
error
callBackEvents
{
if
{
console
error
;
else
{
'J2O带返回值'
'数组的三个值：n[0]:'
[
]
'n[1]:'
'n[2]:'
2
;
}
;
}
>
JS
->
OC
>
Text
{
emitterO2J
;
}
OC
JS
>
/
View
>
;
}
;
styles
create
{
himiTextStyle
{
backgroundColor
'#eee'
color
'#f00'
fontSize
30
marginTop
70
;
|
下面是运行效果：（点击看动态图，主要看演示过程与控制台输出哦！）
注意：
1.点击JS->OC 后，会调用三个函数哦
2.点击JS->OC->JS,先是通过JS->OC的临时函数，触发OC->JS的过程！
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
