- 解决思路：
react-native-scrollable-tab-view嵌套listview实现思路会造成listview下拉刷新和react-native-scrollable-tab-view左右切换标签时手势冲突。解决这个冲突的大体思路是在listview上判断手势是左右滑动还是上下滑动，如果是上下互动则禁用react-native-scrollable-tab-view的左右滑动，如果是左右滑动在打开react-native-scrollable-tab-view的左右滑动。
- 第一步：定义两个全局变量记录手指的位置
this.pageX = '',this.pageY = '',listview实现俩个内部的方法onTouchStart和onTouchMove，根据名字不难理解两个方法的作用，onTouchStart手指开始接触的时候，onTouchMove手指开始移动的时候，通过这两个方法返回的值来计算来判断用户是要下拉刷新还是左右切换标签，代码如下
<ListView
dataSource={this.state.dataSource}
onEndReached={this._loadMoreData}
renderFooter={this.renderFooter}
enableEmptySections={true}
onEndReachedThreshold={10}
renderRow={this._renderRow.bind(this)}
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();
}
}}
refreshControl ={
<RefreshControl
refreshing={this.state.isRefreshing}
onRefresh={this._loadAgainList}
title={'加载中...'}
titleColor={'#b1b1b1'}
colors={['#ff0000', '#00ff00', '#0000ff', '#3ad564']}
progressBackgroundColor={'#fafafa'}
/>
}
/>
- 第二部实现
lockSlide和openSlide两个方法来打开和禁用react-native-scrollable-tab-view的滑动。
- 首先需要在源码
react-native-scrollable-tab-view源码里添加一个方法供外界调用，文件路径是node_modules/react-native-scrollable-tab-view/index.js
setNativeProps (scroll) {
//scroll为是否可以滑动的bool之
//scrollEnabled为源码中控制是否可以滑动的一个属性
if(scroll){
this.scrollView.setNativeProps({
scrollEnabled: true,
});
} else {
this.scrollView.setNativeProps({
scrollEnabled: false,
});
}
},
- 给
ScrollableTabView绑定一个ref ref = "scrollTabView",通过这个调用我们刚才源码中添加的那个方法，通过传递一个bool来控制是否可以滑动从而实现lockSlide和openSlide两个方法
_lockSlide(){
if (Platform.OS === 'android') {
this.refs.scrollTabView.setNativeProps(false);
}
}
_openSlide(){
if (Platform.OS === 'android'){
this.refs.scrollTabView.setNativeProps(true);
}
}
- 大功告成，网上有说用低版本的
react-native-scrollable-tab-view，不过个人不建议这么做，感觉低版本有很多Bug
