導(dǎo)讀:在組合使用多個支持手勢操作的組件時經(jīng)常會遇到觸摸事件的沖突荚虚,導(dǎo)致某個控件無法正常工作,通過對PanResponder的接管,可以自由的操作子組件皮璧,在合適的時候讓合適的組件接管觸摸操作。這篇文章放了好久分飞,一直沒有放出來悴务,慚愧,好像實在懶得寫完了譬猫,就算給大家提供個思路吧讯檐。
最近參與一個react-native項目的開發(fā),其中一項需求是需要有一個全屏查看圖片的組件染服,最好是純js實現(xiàn)别洪,需要支持手勢操作,如雙擊縮放柳刮,雙指縮放等挖垛,能夠支持滑動查看多張圖片痒钝,且在圖片較多的情況下有良好的性能。
在github上找了很久發(fā)現(xiàn)現(xiàn)有的組件各有各的問題痢毒,尤其是很多控件因為使用listview送矩,所以首次加載時性能問題嚴(yán)重。
沒有現(xiàn)成的解決方案那我們可以組合滑動查看圖片的組件和支持單張圖片縮放的組件哪替。但是這里又會遇到一個問題,viewpager內(nèi)嵌transformable-image的時候栋荸,viewpager的swiper功能會失效。
解決方法很簡單凭舶,只要寫個自定義組件晌块,組合使用viewpager和transformable-image。對其中的PanResponder進(jìn)行接管库快,判斷當(dāng)前的觸摸事件需要由哪個子組件進(jìn)行操作摸袁,把事件傳遞給該組件就可以。