正文

reactnative系列教程之十二reactnative(js/es)与ios(object-c)交互通信

李华明Himi  李华明Himi  2022-12-04  580

关键词：

本站文章均为李华明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

       
         #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 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调用的代码段：

       
        
         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 代码段（导出函数）：

       
        
         #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
         <
         [
         查看详情  
一文解读无人配送标准进展|标准解读系列之十二关注公号回复“221123”可提供相关标准原文下载末端物流配送，即物流配送“最后一公里”，是指送达给消费者的物流，是以满足配送环节的客户为直接目的的物流活动。在物流整个运作流程中，大体指包裹从物...  查看详情  
系列文章--opencv入门教程 《OpenCV3编程入门》内容简介&勘误&配套源代码下载【OpenCV入门教程之十八】OpenCV仿射变换&SURF特征点描述合辑【OpenCV入门教程之十七】OpenCV重映射&SURF特征点检测合辑【OpenCV入门教程之十六】OpenCV角点检测之Harris...  查看详情  
chrome插件(扩展)开发资料...com/liuxianan/p/chrome-plugin-develop.html Chrome浏览器扩展开发系列2015年Chrome浏览器扩展开发系列之十九：扩展开发示例 Chrome浏览器扩展开发系列之十八：扩展的软件国际化chrome.i18nAPI Chrome浏览器扩展开发系列之十七：扩展中...  查看详情  
之十二在实际的业务场景中，我们可能会碰到非常多的使用PowerQuery进行文件处理的案例。文件处理会有一些什么场景呢？CSV文件读取    CSV文件读取是标准的格式化的数据读取方式，将二进制转换称为CSV文件Excel文件读取...  查看详情  
kvm之十二：虚拟机迁移虚拟机迁移该方式要确保虚拟机是关机状态。virshshutdownsnalevirshdumpxmlsnale>/etc/libvirt/qemu/snale_qy.xml  //如果是远程机器，需要把该配置文件拷贝到远程机器上virshdomblklistsnale  //查看snale子机的磁盘所在目录TargetSource-...  查看详情  
一文解读无人配送标准进展|标准解读系列之十二关注公号回复“221123”可提供相关标准原文下载末端物流配送，即物流配送“最后一公里”，是指送达给消费者的物流，是以满足配送环节的客户为直接目的的物流活动。在物流整个运作流程中，大体指包裹从物...  查看详情  
基于ffmpeg的视频播放器之十二：seekseek是播放器的常用操作，也是衡量播放器好坏的重要标志之一。一.效果下面是对正在播放的4K视频执行seek操作  查看详情  
跟kingdz学html5之十二html5form表单元素新增属性 这节课给大家补充一下，一些前些课程没有接触的知识。在XHTML中，表单内的从属元素必须书写在表单内部，但是在HTML5中，可以把他们书写在页面上任何地方，然后给元素制定一个form属性，属性值为该表单单位的id，这样...  查看详情  
javacv的摄像头实战之十二：性别检测(代码片段)...ub.com/zq2599/blog_demos本篇概览本文是《JavaCV的摄像头实战》系列的第十二篇，咱们来开发一个实用功能：识别性别并显示在预览页面，如下图：今天的代码，主要功能如下图所示：如果您看过《JavaCV的摄像头...  查看详情  
javacv的摄像头实战之十二：性别检测(代码片段)...ub.com/zq2599/blog_demos本篇概览本文是《JavaCV的摄像头实战》系列的第十二篇，咱们来开发一个实用功能：识别性别并显示在预览页面，如下图：今天的代码，主要功能如下图所示：如果您看过《JavaCV的摄像头...  查看详情  
项目pmp之十二——项目采购管理一、定义：存在法律义务，需要对采购过程了解，非法律专家，合同约束项目经理无权签署对组织有约束力的法律文件明确：预期可交付成果；未规定的任何事；法律文化等集中式/分散式采购发展趋势：工具更新（新型模型采...  查看详情  
java经典编程题50道之十二企业发放的奖金根据利润提成：利润(I)低于或等于10万元时，奖金可提10%；利润高于10万元，低于20万元时，低于10万元的部分按10%提成，高于10万元的部分，可提成7.5%；20万到40万之间时，高于20万元的部分，可提成5%；40万到60万...  查看详情  
跟我学android之十二文件解析与处理视频课：【免费】零基础学安卓Android移动开发本章内容第1节 FileExplorer操作第2节 SharedPreferences第3节 普通文件操作第4节 SD卡读写操作本章目标熟练掌握FileExplorer的用法熟练掌握SharedPreference文件操作。熟练掌握普通文件的...  查看详情  
app设计灵感之十二组精美的插画引导页设计案例引导页是软件打开时首先呈现在用户眼前的第一个页面，如何才能在引导页这里快速吸引用户的注意力？这十二组插画引导页也许会带给你灵感。①FoodDelivery-MobileAppbyAnastasia②OnboardingforBuyingApartmentAppbyPapayWicaksono③RealEstat...  查看详情  
ccna之十二framerelay帧中继FramRelay帧中继帧中继简介VC、LMI、DLCI的概念帧中继映射Inverse-ARP的操作帧中继配置帧中继简介分组交换广域网接入方式的一个代表，分组交换是以分组的形式在广域网的环境中穿梭的，使用虚电路进行连接；提供面向对象的服务...  查看详情  
app设计灵感之十二组精美的旅行app设计案例有哪些名胜古迹可以去旅行，旅行目的地的食宿如何解决，这些都可以通过旅行App来解决。来看看这十二组旅行App给你的灵感吧。①TriptimemobileappscreensbyTarasMigulko②TravelUIexploration-MobileAppbyZesan③Travelservice-MobileAppbyAbdullahMam...  查看详情  
图像算法之十二：非局部均值滤波及其matlab实现保边去噪算法之二：首先谈一下什么是非局部均值滤波。在此之前，我们先来看一下均值滤波的原理。均值滤波均值滤波的计算非常简单，将图像像素点灰度记录在数组中，然后设置方框半径的值，然后将方...  查看详情  

     

     
        

          免责声明：如内容涉及版权或违规等问题，请在尽快内联系我们pp114#vip.qq.com，我们将在第一时间删除内容。
        

         
 
         