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

2020-01-21 00:31:43王旭

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

react,native,ios交互,ios,reactnative,原生交互

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

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

react,native,ios交互,ios,reactnative,原生交互

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

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

react,native,ios交互,ios,reactnative,原生交互

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

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

react,native,ios交互,ios,reactnative,原生交互
.h文件

react,native,ios交互,ios,reactnative,原生交互
.m文件

react,native,ios交互,ios,reactnative,原生交互
.m文件

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