欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

ios原生和react-native各種交互的示例代碼

 更新時間:2017年08月22日 09:40:28   作者:請叫我啊亮  
本篇文章主要介紹了ios原生和react-native各種交互的示例代碼,非常具有實用價值,需要的朋友可以參考下

需求:讓一個表格視圖中的cell能左滑刪除,效果圖如下:


目前RN中的ListView主要問題是復(fù)用,以及其他一些細節(jié)如索引視圖、左滑刪除、編輯等,要想在RN上自定義實現(xiàn)原生的這種效果尚有一定的問題,在必要時可以考慮使用原生的UITableView,數(shù)據(jù)從RN端傳遞

1、原生端編寫表格控制器NativeTableViewController,暴露的屬性如下


datas為表格數(shù)據(jù)源,另外一個為需要暴露給RN調(diào)用用方法。

2、框架只提供了暴露UIView給RN端的接口,所以需要制作一個中轉(zhuǎn)UIView視圖,該UIView的.h文件跟控制器的完全一致,.m實現(xiàn)如下


視圖初始化的時候創(chuàng)建控制器,并將控制器的view添加為子視圖,顯示的時候就是控制器的視圖了。setDatas和changeBackgroundColor方法僅僅只是個鏈接作用,實際是調(diào)用的控制器的方法

3、要想將UIView視圖暴露給RN,需要使用RCTViewManager的子類。RCTViewManager為框架提供的原生端視圖管理類,已經(jīng)實現(xiàn)了RCTBridgeModule接口,會自動將相應(yīng)的UIView注冊到橋接文件中。子類需要實現(xiàn)兩個方法


.h文件


.m文件


.m文件

宏RCT_EXPORT_VIEW_PROPERTY是將該管理類管理的那個視圖,也就是方法-(UIView *)view返回的那個視圖的屬性暴露出去,js端設(shè)置該屬性的時候會觸發(fā)屬性的setter方法,也就是NativeTableView中實現(xiàn)的- (void)setDatas:(NSArray *)datas,進而觸發(fā)控制器的setDatas方法,刷新表格

4、js端調(diào)用。如下封裝原生端暴露出去的視圖,需要注意的是默認情況下,requireNativeComponent方法的第一個參數(shù)不是原生端的類名


使用如下,必須要設(shè)置寬高才行


5、現(xiàn)在已經(jīng)完成了視圖的顯示,還缺少的是事件回調(diào)。這里有兩類事件,觸發(fā)條件不一:

a、js端事件驅(qū)動,舉例:js端調(diào)用原生表格控制器的changeBackgroundColor方法

b、原生端事件驅(qū)動,舉例:原生cell左滑,點擊刪除按鈕,觸發(fā)js端數(shù)據(jù)源數(shù)據(jù)改變,進而刷新頁面

a事件方案:

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

很顯然的看到了我們重寫的父類方法- (UIView *)view,這里可以得到NativeTableView,但是每次調(diào)用都是返回一個新的視圖,那么可以將這個視圖緩沖起來,然后每次都返回同一個?理想很豐滿,現(xiàn)實很骨感,看官方的文檔


顯然這里不允許換成該視圖。至于原因我也不太清楚

看源碼發(fā)現(xiàn)每個注冊的視圖其實都是有編號tag的,只要知道原生端視圖注冊時生成的tag,就能從視圖管理類RCTUIManager中找到它,下面是最終實現(xiàn)代碼


js端調(diào)用如下:


findNodeHandle方法直接從react-native庫中導(dǎo)出,找到視圖的tag


b事件方案:

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



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


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

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



流程是:

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

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

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

以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 詳解vant2 自動檢查表單驗證 -validate

    詳解vant2 自動檢查表單驗證 -validate

    這篇文章主要介紹了vant2 自動檢查表單驗證 -validate,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-10-10
  • 解決React報錯Cannot assign to 'current' because it is a read-only property

    解決React報錯Cannot assign to 'current'

    這篇文章主要為大家介紹了React報錯Cannot assign to 'current' because it is a read-only property的解決方法,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-12-12
  • React報錯解決之ref返回undefined或null

    React報錯解決之ref返回undefined或null

    最近使用react做個滾動監(jiān)聽獲取更多數(shù)據(jù)效果,當想獲取dom時發(fā)現(xiàn)怎么也獲取不到,下面這篇文章主要給大家介紹了關(guān)于React報錯解決之ref返回undefined或null的相關(guān)資料,需要的朋友可以參考下
    2022-08-08
  • React事件節(jié)流效果失效的原因及解決

    React事件節(jié)流效果失效的原因及解決

    這篇文章主要介紹了React事件節(jié)流效果失效的原因及解決,幫助大家更好的理解和學習使用React框架,感興趣的朋友可以了解下
    2021-04-04
  • React移動端項目之pdf預(yù)覽問題

    React移動端項目之pdf預(yù)覽問題

    這篇文章主要介紹了React移動端項目之pdf預(yù)覽問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-02-02
  • react router4+redux實現(xiàn)路由權(quán)限控制的方法

    react router4+redux實現(xiàn)路由權(quán)限控制的方法

    本篇文章主要介紹了react router4+redux實現(xiàn)路由權(quán)限控制的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-05-05
  • Shopee在React?Native?架構(gòu)方面的探索及發(fā)展歷程

    Shopee在React?Native?架構(gòu)方面的探索及發(fā)展歷程

    這篇文章主要介紹了Shopee在React?Native?架構(gòu)方面的探索,本文會從發(fā)展歷史、架構(gòu)模型、系統(tǒng)設(shè)計、遷移方案四個方向逐一介紹我們?nèi)绾我徊讲降貪M足多團隊在復(fù)雜業(yè)務(wù)中的開發(fā)需求,需要的朋友可以參考下
    2022-07-07
  • React 首頁加載慢問題性能優(yōu)化案例詳解

    React 首頁加載慢問題性能優(yōu)化案例詳解

    這篇文章主要介紹了React 首頁加載慢問題性能優(yōu)化案例詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下
    2021-09-09
  • react-native-fs實現(xiàn)文件下載、文本存儲的示例代碼

    react-native-fs實現(xiàn)文件下載、文本存儲的示例代碼

    本篇文章主要介紹了react-native-fs實現(xiàn)文件下載、文本存儲的示例代碼,具有一定的參考價值,有興趣的可以了解下
    2017-09-09
  • 解讀useState第二個參數(shù)的"第二個參數(shù)"

    解讀useState第二個參數(shù)的"第二個參數(shù)"

    這篇文章主要介紹了useState第二個參數(shù)的"第二個參數(shù)",具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03

最新評論