需求:讓一個(gè)表格視圖中的cell能左滑刪除,效果圖如下:
目前RN中的ListView主要問(wèn)題是復(fù)用磅甩,以及其他一些細(xì)節(jié)如索引視圖姥卢、左滑刪除、編輯等僧叉,要想在RN上自定義實(shí)現(xiàn)原生的這種效果尚有一定的問(wèn)題,在必要時(shí)可以考慮使用原生的UITableView倍权,數(shù)據(jù)從RN端傳遞
1、原生端編寫表格控制器NativeTableViewController当船,暴露的屬性如下
datas為表格數(shù)據(jù)源苍息,另外一個(gè)為需要暴露給RN調(diào)用用方法壹置。
2、框架只提供了暴露UIView給RN端的接口盖喷,所以需要制作一個(gè)中轉(zhuǎn)UIView視圖课梳,該UIView的.h文件跟控制器的完全一致暮刃,.m實(shí)現(xiàn)如下
視圖初始化的時(shí)候創(chuàng)建控制器椭懊,并將控制器的view添加為子視圖步势,顯示的時(shí)候就是控制器的視圖了。setDatas和changeBackgroundColor方法僅僅只是個(gè)鏈接作用狂窑,實(shí)際是調(diào)用的控制器的方法
3桑腮、要想將UIView視圖暴露給RN,需要使用RCTViewManager的子類奕纫。RCTViewManager為框架提供的原生端視圖管理類烫沙,已經(jīng)實(shí)現(xiàn)了RCTBridgeModule接口锌蓄,會(huì)自動(dòng)將相應(yīng)的UIView注冊(cè)到橋接文件中。子類需要實(shí)現(xiàn)兩個(gè)方法
.h文件
.m文件
.m文件
宏RCT_EXPORT_VIEW_PROPERTY是將該管理類管理的那個(gè)視圖,也就是方法-(UIView *)view返回的那個(gè)視圖的屬性暴露出去灵汪,js端設(shè)置該屬性的時(shí)候會(huì)觸發(fā)屬性的setter方法柑潦,也就是NativeTableView中實(shí)現(xiàn)的- (void)setDatas:(NSArray *)datas渗鬼,進(jìn)而觸發(fā)控制器的setDatas方法,刷新表格
4肛循、js端調(diào)用。如下封裝原生端暴露出去的視圖咏窿,需要注意的是默認(rèn)情況下,requireNativeComponent方法的第一個(gè)參數(shù)不是原生端的類名
使用如下袜瞬,必須要設(shè)置寬高才行
5邓尤、現(xiàn)在已經(jīng)完成了視圖的顯示贴谎,還缺少的是事件回調(diào)擅这。這里有兩類事件仲翎,觸發(fā)條件不一:
a铛漓、js端事件驅(qū)動(dòng),舉例:js端調(diào)用原生表格控制器的changeBackgroundColor方法
b逐哈、原生端事件驅(qū)動(dòng),舉例:原生cell左滑禀梳,點(diǎn)擊刪除按鈕,觸發(fā)js端數(shù)據(jù)源數(shù)據(jù)改變塞耕,進(jìn)而刷新頁(yè)面
a事件方案:
RCT_EXPORT_METHOD宏可以將原生端方法暴露給js端扫外,js直接調(diào)用就可以了廓脆。那么在這個(gè)方法里面要如何才能拿到目標(biāo)視圖NativeTableView停忿,然后調(diào)用它的changeBackgroundColor方法呢?
很顯然的看到了我們重寫的父類方法- (UIView *)view吮铭,這里可以得到NativeTableView谓晌,但是每次調(diào)用都是返回一個(gè)新的視圖癞揉,那么可以將這個(gè)視圖緩沖起來(lái)溺欧,然后每次都返回同一個(gè)胧奔?理想很豐滿龙填,現(xiàn)實(shí)很骨感拐叉,看官方的文檔
顯然這里不允許換成該視圖凤瘦。至于原因我也不太清楚
看源碼發(fā)現(xiàn)每個(gè)注冊(cè)的視圖其實(shí)都是有編號(hào)tag的蔬芥,只要知道原生端視圖注冊(cè)時(shí)生成的tag,就能從視圖管理類RCTUIManager中找到它返吻,下面是最終實(shí)現(xiàn)代碼
js端調(diào)用如下:
findNodeHandle方法直接從react-native庫(kù)中導(dǎo)出测僵,找到視圖的tag
b事件方案:
原生端事件通知js端捍靠,使用RCTEventEmitter榨婆。
原生事件觸發(fā)時(shí)調(diào)用如下:
控制器NativeTableViewController的代理方法實(shí)現(xiàn)
js端監(jiān)聽(tīng)原生調(diào)用事件如下:
流程是:
1、js端注冊(cè)監(jiān)聽(tīng)原生端通知
2拖吼、原生端表格代理方法觸發(fā)事件这吻,調(diào)用RativeTOJSEventEmitter發(fā)出通知
3唾糯、js端監(jiān)聽(tīng)到通知鬼贱,觸發(fā)回調(diào)这难,處理數(shù)據(jù)葡秒,重新刷新視圖