背景:
在scrollview里子組件A里 添加了觸摸事件(pan,move)等
結(jié)果移動A的時(shí)候 scrollview一起滑動
這比較讓人頭(dan)疼,
查了資料 當(dāng)一個(gè)view申請觸摸事件后其他組件不會響應(yīng)事件
但實(shí)際跟現(xiàn)實(shí)不太一樣
又查了資料:https://github.com/facebook/react-native/issues/1046
這里說:
However, we often have troubles while interacting with touch interactions happening on the main thread, like the iOS slider, or any scroll views. The problem is that javascript cannot immediately reject the responsiveness of the native event, because the main thread must synchronously decide if JS or the scroll view should become responder, and JS can only respond asynchronously.
大概意思是 js是主線程 主線程被堵塞得不到及時(shí)的響應(yīng)
既然有bug那應(yīng)該有解決方案吧?
谷歌普遍的解決方案是 做滑動之前先把scrollview禁止滑動
等觸摸事件結(jié)束以后允許滑動scrollview
跟著思路做了一遍結(jié)果始終不太理想
后來 看到了這個(gè) [https://github.com/mjracca/react-native-scroll-block]
(https://github.com/mjracca/react-native-scroll-block)
雖然沒能解決我的問題但給我提供了一個(gè)思路
先整理一下思路
1.做一個(gè)攔截層
2.攔截touch事件 判斷scrollview滑動事件還是view的觸摸事件
3.判斷view的觸摸事件后禁止scrollview的滑動
4.觸摸事件結(jié)束以后允許scrollview滑動
代碼:
(這里只提供IOS)
核心代碼
通過 componentID 來區(qū)分 觸發(fā)組件
通過找父組件 等找到scrollview組件后 操作他的滑動狀態(tài)
詳細(xì)查看源碼
https://github.com/jinjiantong/react_native_blockView