ios原生和react-native各種交互的示例代碼-創(chuàng)新互聯(lián)

需求：讓一個(gè)表格視圖中的cell能左滑刪除，效果圖如下：

目前成都創(chuàng)新互聯(lián)公司已為近1000家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬主機(jī)、網(wǎng)站運(yùn)營、企業(yè)網(wǎng)站設(shè)計(jì)、漳縣網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

目前RN中的ListView主要問題是復(fù)用，以及其他一些細(xì)節(jié)如索引視圖、左滑刪除、編輯等，要想在RN上自定義實(shí)現(xià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)而刷新頁面

a事件方案：

RCT_EXPORT_METHOD宏可以將原生端方法暴露給js端，js直接調(diào)用就可以了。那么在這個(gè)方法里面要如何才能拿到目標(biāo)視圖NativeTableView，然后調(diào)用它的changeBackgroundColor方法呢？

很顯然的看到了我們重寫的父類方法- (UIView *)view，這里可以得到NativeTableView，但是每次調(diào)用都是返回一個(gè)新的視圖，那么可以將這個(gè)視圖緩沖起來，然后每次都返回同一個(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庫中導(dǎo)出，找到視圖的tag

b事件方案：

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

原生事件觸發(fā)時(shí)調(diào)用如下：

控制器NativeTableViewController的代理方法實(shí)現(xiàn)

js端監(jiān)聽原生調(diào)用事件如下：

流程是：

1、js端注冊(cè)監(jiān)聽原生端通知

2、原生端表格代理方法觸發(fā)事件，調(diào)用RativeTOJSEventEmitter發(fā)出通知

3、js端監(jiān)聽到通知，觸發(fā)回調(diào)，處理數(shù)據(jù)，重新刷新視圖

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)建站。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站muchs.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、建站服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

文章名稱：ios原生和react-native各種交互的示例代碼-創(chuàng)新互聯(lián)
路徑分享：http://muchs.cn/article26/ddojjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、網(wǎng)站導(dǎo)航、品牌網(wǎng)站建設(shè)、軟件開發(fā)、網(wǎng)站營銷、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)