[RN]react-native-scrollable-tab-view和FlatList手势冲突解决

Posted 2022-02-28 wukong1688

问题描述:

react-native-scrollable-tab-view叠加react-native-scrollable-tab-view再加上FlatList
FlatList向下拉时，会造成上一级的react-native-scrollable-tab-view插件的内容左右滑动，进而FlatList的下拉滑动失效，做不成下拉刷新功能

解决思路 :

FlatList滑动时，判断滑动方向，如果是下拉就屏蔽react-native-scrollable-tab-view左右滑动的功能，等下拉时间结束时再开启,如果方向是左右就开启react-native-scrollable-tab-view左右滑动的功能,不好的地方就是,手势切换时会有感觉

代码如下：

<FlatList
         data=this.state.data
         renderItem=this.renderListItem
         refreshing=this.state.refreshing
         onRefresh=this._renderRefresh
         style=marginBottom:40
         onTouchStart=(e) => 
             this.pageX = e.nativeEvent.pageX;
             this.pageY = e.nativeEvent.pageY;
         
        onTouchMove=(e) => 
               if(
                     Math.abs(this.pageY - e.nativeEvent.pageY) >               Math.abs(this.pageX -     e.nativeEvent.pageX)) 
               // 下拉
                 this.props.lockSlide();
                     else  // 左右滑动
                    this.props.openSlide(); 
           />

主要方法是onTouchStart，onTouchMove, 屏蔽react-native-scrollable-tab-view左右滑动

 

调用：

调用
_lockSlide() this.setState(
      scrollTabViewLocked : true
    )

_openSlide() this.setState(
      scrollTabViewLocked : false
    );

 

 

本博客地址： wukong1688

本文原文地址：https://www.cnblogs.com/wukong1688/p/11108393.html

转载请著名出处！谢谢~~