ios原生和react-native各种交互的示例代码

需求：让一个表格视图中的cell能左滑删除，效果图如下：

目前RN中的ListView主要问题是复用，以及其他一些细节如索引视图、左滑删除、编辑等，要想在RN上自定义实现原生的这种效果尚有一定的问题，在必要时可以考虑使用原生的UITableView，数据从RN端传递

1、原生端编写表格控制器NativeTableViewController，暴露的属性如下

datas为表格数据源，另外一个为需要暴露给RN调用用方法。

2、框架只提供了暴露UIView给RN端的接口，所以需要制作一个中转UIView视图，该UIView的.h文件跟控制器的完全一致，.m实现如下

视图初始化的时候创建控制器，并将控制器的view添加为子视图，显示的时候就是控制器的视图了。setDatas和changeBackgroundColor方法仅仅只是个链接作用，实际是调用的控制器的方法

3、要想将UIView视图暴露给RN，需要使用RCTViewManager的子类。RCTViewManager为框架提供的原生端视图管理类，已经实现了RCTBridgeModule接口，会自动将相应的UIView注册到桥接文件中。子类需要实现两个方法

.h文件

.m文件

.m文件

宏RCT_EXPORT_VIEW_PROPERTY是将该管理类管理的那个视图，也就是方法-(UIView *)view返回的那个视图的属性暴露出去，js端设置该属性的时候会触发属性的setter方法，也就是NativeTableView中实现的- (void)setDatas:(NSArray *)datas，进而触发控制器的setDatas方法，刷新表格

4、js端调用。如下封装原生端暴露出去的视图，需要注意的是默认情况下，requireNativeComponent方法的第一个参数不是原生端的类名

使用如下，必须要设置宽高才行

5、现在已经完成了视图的显示，还缺少的是事件回调。这里有两类事件，触发条件不一：

a、js端事件驱动，举例：js端调用原生表格控制器的changeBackgroundColor方法

b、原生端事件驱动，举例：原生cell左滑，点击删除按钮，触发js端数据源数据改变，进而刷新页面

a事件方案：

RCT_EXPORT_METHOD宏可以将原生端方法暴露给js端，js直接调用就可以了。那么在这个方法里面要如何才能拿到目标视图NativeTableView，然后调用它的changeBackgroundColor方法呢？

很显然的看到了我们重写的父类方法- (UIView *)view，这里可以得到NativeTableView，但是每次调用都是返回一个新的视图，那么可以将这个视图缓冲起来，然后每次都返回同一个？理想很丰满，现实很骨感，看官方的文档

显然这里不允许换成该视图。至于原因我也不太清楚

看源码发现每个注册的视图其实都是有编号tag的，只要知道原生端视图注册时生成的tag，就能从视图管理类RCTUIManager中找到它，下面是最终实现代码

js端调用如下：

findNodeHandle方法直接从react-native库中导出，找到视图的tag

b事件方案：

原生端事件通知js端，使用RCTEventEmitter。

原生事件触发时调用如下：

控制器NativeTableViewController的代理方法实现

js端监听原生调用事件如下：

流程是：

1、js端注册监听原生端通知

2、原生端表格代理方法触发事件，调用RativeTOJSEventEmitter发出通知

3、js端监听到通知，触发回调，处理数据，重新刷新视图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# react  # native  # ios交互  # ios  # reactnative  # 原生交互  # 关于React Native使用axios进行网络请求的方法  # 详解React Native与IOS端之间的交互  # iOS端React Native差异化增量更新的实现方法  # React Native中NavigatorIOS组件的简单使用详解  # React-Native 桥接iOS原生开发详解  # react-native组件中NavigatorIOS和ListView结合使用的方法  # React Native第三方平台分享的实例（Android  # IOS双平台）  # React Native 集成 iOS 原生功能(打印机功能  # 的是  # 管理类  # 子类  # 要想  # 回调  # 都是  # 我也  # 在这个  # 是有  # 第一个  # 就能  # 不太  # 并将  # 问题是  # 自定义  # 重写  # 另外一个  # 才行  # 每次都  # 可以得到 

相关文章： 建站之星云端配置指南：模板选择与SEO优化一键生成  建站之星五站合一营销型网站搭建攻略，流量入口全覆盖优化指南  弹幕视频网站制作教程下载,弹幕视频网站是什么意思？  如何在局域网内绑定自建网站域名？  定制建站哪家更专业可靠？推荐榜单揭晓  七夕网站制作视频,七夕大促活动怎么报名？  建站之星如何实现PC+手机+微信网站五合一建站？  孙琪峥织梦建站教程如何优化数据库安全？  已有域名如何快速搭建专属网站？  安云自助建站系统如何快速提升SEO排名？  制作网站的模板软件,网站怎么建设？  专业公司网站制作公司,用什么语言做企业网站比较好？  如何快速使用云服务器搭建个人网站？  如何高效利用亚马逊云主机搭建企业网站？  如何快速生成凡客建站的专业级图册？  大连企业网站制作公司,大连2025企业社保缴费网上缴费流程？  建站为何优先选择香港服务器？  专业网站建设制作报价,网页设计制作要考什么证？  宝塔建站助手安装配置与建站模板使用全流程解析  子杰智能建站系统｜零代码开发与AI生成SEO优化指南  郑州企业网站制作公司,郑州招聘网站有哪些？  Android滚轮选择时间控件使用详解  如何制作公司的网站链接,公司想做一个网站，一般需要花多少钱？  西安市网站制作公司,哪个相亲网站比较好?西安比较好的相亲网站？  c# 在高并发场景下，委托和接口调用的性能对比  建站之星后台管理系统如何操作？  无锡制作网站公司有哪些,无锡优八网络科技有限公司介绍？  如何快速搭建高效WAP手机网站吸引移动用户？  宝塔面板创建网站无法访问？如何快速排查修复？  再谈Python中的字符串与字符编码（推荐）  微信小程序 五星评分(包括半颗星评分)实例代码  如何在Golang中引入测试模块_Golang测试包导入与使用实践  如何快速打造个性化非模板自助建站？  ,怎么用自己头像做动态表情包？  云南网站制作公司有哪些,云南最好的招聘网站是哪个？  打鱼网站制作软件,波克捕鱼官方号怎么注册？  建站一年半SEO优化实战指南：核心词挖掘与长尾流量提升策略  如何快速搭建高效服务器建站系统？  建站之星如何开启自定义404页面避免用户流失？  英语简历制作免费网站推荐,如何将简历翻译成英文？  如何通过多用户协作模板快速搭建高效企业网站？  建站主机是否等同于虚拟主机？  番禺网站制作公司哪家值得合作,番禺图书馆新馆开放了吗？  网站建设制作需要多少钱费用,自己做一个网站要多少钱，模板一般多少钱？  宝塔新建站点报错如何解决？  网站制作话术技巧,网站推广做的好怎么话术？  如何通过主机屋免费建站教程十分钟搭建网站？  c# Task.Yield 的作用是什么 它和Task.Delay(1)有区别吗  焦点电影公司作品,电影焦点结局是什么？  网站制作公司排行榜,抖音怎样做个人官方网站