react native 封裝 iOS 原生UI 組件

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(),一直不會打印警告,不過也可能跟個人視圖有關係,我添加的有動畫,可能產生衝突