[RN]react-native-scrollable-tab-view和FlatList手勢沖突解決

問題描述:

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

轉載請著名出處！謝謝~~