react native 的組件還是不多,有些也並不怎么好用,這時候就需要封裝原生 UI 組件來供RN 使用了
之前寫過RN 與 native 的通信 無非就是兩種:
1 >>> RN->native react native 內部事件需要通知 native 調用 native 的方法(或者傳遞RN 中的數據到 native),這時候可以用新建一個 manager 之類的文件 RCT_EXPORT_MOUDLE() 暴露 native類 ,RCT_EXPORT_METHOD () 暴露 native 方法給 js 調用 ,在 js里通過 NativeMoudles.XXX 取得該 native 文件 然后調用方法(傳遞 js里的參數到 native )即可完成通信
2 >>> native->RN native 發生的事件需要通知到js的時候 一種發送通知 self.bridge sendXXX 這種方法好像不常用 有警告,當然也可以用上面的那種采用 js主動調用 native, 在 native 方法里添加一個 block 回調,在 block 回調里把數據回傳給 js. 或者就是下面的方法,導出 native 組件的方法給 js
下面開始封裝原生ios組件
這里我封裝的是一個相冊瀏覽視圖,PhotoView 繼承自 UIView ,就按普通的自定義 View 來就可以了.
然后有三點不同的
1. >>> 聲明一個RCTBubblingEventBlock 的屬性,這是什么鬼 ? 就是你要導出的方法,命名以 on開頭 比如 onTap,onClick自行發揮
2. >>> 如果需要在 js里給你的 UI 組件傳值 ,賦值屬性的話 ,暴露出來一個需要傳值得屬性: 如@property(nonatomic,strong)NSString ***
3. >>>如果需要導出方法的話, 聲明一個 protocol ,代理方法 ,讓你的代理去執行,為什么要用代理呢 , 后面再說,下面看圖: 自定義 UI 組件
注釋已經很清楚了,沒有什么需要解釋的吧,需要的話,私聊哈
然后就是導出這個 UI 組件了
1 > 新建一個Manager,當然啦,你愛叫什么都行,一般以 manager 命名,繼承自 RCTViewManger
2 > 遵守你剛才自定義視圖的協議 作為他的代理 實現他的代理方法
3 > 重寫-(UIView *)view 的方法,在該方法里 不要賦值什么屬性,什么都不要干, alloc init 設置代理為 self 就 OK
4 > RCT_EXPORT_MOUDLE()導出模塊 RCT_EXPORT_VIEW_PROPERTY(url,NSString)導出屬性 RCT_EXPORT_VIEW_PROPERTY(onSingleTap,RCTBubblingEventBlock)導出方法 需要注意的是一定要寫對屬性名 和方法名 跟你自定義視圖里的一致
5 > 如果是單純的導出屬性的話不需要代理什么的已經可以了 導出方法的話就要實現代理方法 在代理方法里 通過持有的自定義視圖 賦值自定義視圖的 block,導出方法,可以帶一個 obj類型的參數, 下面看圖
最后就是在 js里使用這個原生的 UI 組件了
首先新建一個 js 文件 用來作為導出的 UI 組件
如圖所示: 利用 react native 的 requireNativeComponnent 來導出原生組件(參數1 為 native 的模塊名稱(類名),參數2 為 js中組件名稱(類名))
1和2 是導出的組件名稱 相同
3和4 是需要導出的當前 module 相同
5就是 native 中 RCT_EXPORT_MOUDULE("XXX")括號中的名稱 如果為空就默認為 native 的類名
然后在需要用到的地方就可以 import 該js文件
其中 imgURL 就是 native組件需要的需要
onSingleTap 就是傳遞過來的 native 的事件
注意: 名稱一定要跟 native 里定義的一致 在傳遞過來的參數里 e.nativeEvent.xxx 就是你在 native 傳過來的參數
tips: 有一個比較坑的地方,就是在 js調試你原生 UI 事件的時候不要用 console.warn(),一直不會打印警告,不過也可能跟我的視圖有關系,我添加的有動畫,可能產生沖突