react-native-scrollable-tab-view和listview冲突解决

react-native-scrollable-tab-view和listview冲突解决

问题描述

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

解决思路

listview滑动时，判断滑动方向，如果是下拉就屏蔽react-native-scrollable-tab-view左右滑动的功能，等下拉时间结束时再开启

如果方向是左右就开启react-native-scrollable-tab-view左右滑动的功能

代码

判断listview滑动方向

<GiftedListView
    ref="giftedListView"
    rowView={this._renderRowView}
    onFetch={this._onFetch}
    firstLoader={true}
    pagination={true}
    refreshable={true}
    initialListSize={8}
    withSections={false}
    renderSeparator={this._renderSeparatorView}
    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();
        }
    }}
    customStyles={{
        paginationView: {backgroundColor: '#F9F9FA', },
        refreshableView: {backgroundColor: '#F9F9FA', },
    }}
    rowHasChanged={(r1,r2)=>{r1.id !== r2.id}}
    refreshableTintColor="blue"
    emptyView={this._renderEmptyView}
    paginationFetchingView={this._renderPaginationFetchigView}
    paginationAllLoadedView={this._renderPaginationAllLoadedView}
    paginationWaitingView={this._renderPaginationWaitingView}
    onEndReached={this._onEndReached}
    onEndReachedThreshold={1}>
GiftedListView>

	主要方法是onTouchStart，onTouchMove

    屏蔽react-native-scrollable-tab-view左右滑动

	需要在react-native-scrollable-tab-view组件的源码中添加一个方法（方法名称随意）

setNativeProps: function(scroll) {
  if(scroll){
    this.scrollView.setNativeProps({
      scrollEnabled: true,
    });
  } else {
    this.scrollView.setNativeProps({
      scrollEnabled: false,
    });
  }
},

    调用

_lockSlide(){
    this.refs.scrollTabView.setNativeProps(false);
}

_openSlide(){
    this.refs.scrollTabView.setNativeProps(true);
}