FlatList 和 react-native-viewpager的滚动冲突?



  • FlatList 的header是一个 react-native-viewpager,当在react-native-viewpager 左右滑动时,FlatList 会上下滑动,请问这时怎么阻止FlatList上下滚?大家谁能给点思路啊?



  • 放到 FlatList 里面也就是 ScrollView 里面,FlatList 是 JS 实现的,基于 Native 的 ScrollView,ScrollView 的上下滚动是 Native Event 那部分的,JS 这边据我所知没办法干涉。

    过去,知道的他们用的方法是,按照一定的条件,直接设定 List 的 scrollEnabled 的属性,就是说暂时的禁止其滚动:

    this.listRef.setNativeProps({scrollEnabled: false})
    

    是不治本的方法,本身获取 listRef 就是需要一些技巧,而且 0.47 之前,FlatList 并不支持这个方法。

    比较新的方法,是使用类似 https://github.com/wix/react-native-interactable,或者是,https://github.com/kmagiera/react-native-gesture-handler,前者是提供了许多 Native 端的组件,实现了很多手势和动画,后者是,FB 的 RN 开发人员之一写的,所有事件处理放在 Native 部分的手势组件,按照他的说法,上面的情况是因为 Pan Responder 是位于 JS 的,并非 Native 事件的引入,当两个事件运行于两个不同的线程的时候,无法互动,就会出现上面的情况,他本人也在 React 阿姆斯特丹演讲上做了简要的总结,有兴趣的话,上 youtube 可以看到。

    我没有使用过这些新的方法,但是,我认为这是更好的方法,因为上面的方法我用过,很尴尬的方式,可以做到,但是感觉很尴尬,不舒服。


登录后回复