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

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

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

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

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

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

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

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

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

a事件方案:

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

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

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

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

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

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

js端调用如下:

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

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

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