标签：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 });}
[RN]react-native-scrollable-tab-view和FlatList手势冲突解决
标签：html margin math 地方 www this tps 功能 set
原文地址：https://www.cnblogs.com/wukong1688/p/11108393.html
