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); }