React native scrollview 滑动和触摸事件冲突(pan,move)

背景:
在scrollview里子组件A里 添加了触摸事件(pan,move)等
结果移动A的时候 scrollview一起滑动
这比较让人头(dan)疼,
查了资料 当一个view申请触摸事件后其他组件不会响应事件
但实际跟现实不太一样
又查了资料: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是主线程 主线程被堵塞得不到及时的响应

既然有bug那应该有解决方案吧?

谷歌普遍的解决方案是 做滑动之前先把scrollview禁止滑动
等触摸事件结束以后允许滑动scrollview

跟着思路做了一遍结果始终不太理想

后来 看到了这个 [https://github.com/mjracca/react-native-scroll-block]
(https://github.com/mjracca/react-native-scroll-block)
虽然没能解决我的问题但给我提供了一个思路

先整理一下思路

1.做一个拦截层
2.拦截touch事件 判断scrollview滑动事件还是view的触摸事件
3.判断view的触摸事件后禁止scrollview的滑动
4.触摸事件结束以后允许scrollview滑动

代码:
(这里只提供IOS)

React native scrollview 滑动和触摸事件冲突(pan,move)_第1张图片
Paste_Image.png
React native scrollview 滑动和触摸事件冲突(pan,move)_第2张图片
Paste_Image.png

核心代码
通过 componentID 来区分 触发组件
通过找父组件 等找到scrollview组件后 操作他的滑动状态

详细查看源码
https://github.com/jinjiantong/react_native_blockView

你可能感兴趣的:(React native scrollview 滑动和触摸事件冲突(pan,move))