REACT NATIVE 系列教程之十二REACT NATIVE(JS/ES)与IOS(OBJECT-C)交互通信

Posted 2022-05-28 李华明Himi

本站文章均为  李华明Himi  原创,转载务必在明显处注明： 
转载自【黑米GameDev街区】 原文链接:  http://www.himigame.com/react-native/2301.html

width="150" height="210" frameborder="0" scrolling="no" src="http://widget.weibo.com/relationship/bulkfollow.php?language=zh_cn&uids=1916000601&wide=1&color=FFFFFF,FFFFFF,0082CB,666666&showtitle=0&showinfo=1&sense=0&verified=1&count=1&refer=http%3A%2F%2Fwww.himigame.com%2Freact-native%2F2301.html&dpc=1" style="margin: 0px; padding: 0px; border-width: 0px; font-family: inherit;font-size:undefined; font-style: inherit; font-variant-caps: inherit; line-height: inherit; max-width: 100%;">

一用到跨平台的引擎必然要有引擎与各平台原生进行交互通信的需要。那么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

1 2 3 4 5 6

#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中添加如下：

1 2 3 4 5 6 7

RCT_EXPORT_MODULE ( ) ;   //桥接到Javascript的方法返回值类型必须是void。React Native的桥接操作是异步的，所以要返回结果给Javascript，必须通过回调或者触发事件来进行 RCT_EXPORT_METHOD ( j2oFun1 : ( NSString * ) dataString dateNumber : ( int ) dateNumber )      NSLog ( @"js call iOS function j2oFun1\\n dataString: %@ |dateNumber :%d" , dataString , dateNumber ) ;

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

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

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

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

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

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

1 2 3

var TestOJO = require ( 'react-native' ) . NativeModules . TestOJO ;   TestOJO . j2oFun1 ( 'Himi' , 12321 ) ;

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

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

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

OC 代码段（导出函数）：

1 2 3 4 5 6 7 8 9 10 11 12 13

#import "RCTConvert.h"   RCT_EXPORT_METHOD ( j2oFun2 : ( NSDictionary * ) details )    NSString *name = [ RCTConvert NSString :details [ @"name" ] ] ;    NSNumber *age = [ RCTConvert NSNumber :details [ @"age" ] ] ;    NSArray * array = [ RCTConvert NSArray :details [ @"array" ] ] ;    NSLog ( @"js call iOS function j2oFun2\\n name: %@ | age :%@" , name , [ age stringValue ] ) ;       for ( int i = 0 ; i < [ REACT NATIVE 系列教程之十一插件的安装使用与更新(示例:REACT-NATIVE-TAB-NAVIGATOR) REACT NATIVE 系列教程之十一插件的安装使用与更新(示例:REACT-NATIVE-TAB-NAVIGATOR) REACT NATIVE 系列教程之十三利用LISTVIEW与TEXTINPUT制作聊天/对话框&&获取组件实例常用的两种方式 REACT NATIVE 系列教程之十真机运行报错COMMAND /BIN/SH FAILED WITH EXIT CODE 1 的解决方法 REACT NATIVE 系列教程之十三利用LISTVIEW与TEXTINPUT制作聊天/对话框&&获取组件实例常用的两种方式 REACT NATIVE 系列教程之九REACT NATIVE版本升级步骤与注意事项！