码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-06-30 09:38:16      阅读:119      评论:0      收藏:0      [点我收藏+]

标签:html   margin   math   地方   www   this   tps   功能   set   

问题描述:

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

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

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

标签:html   margin   math   地方   www   this   tps   功能   set   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!