React Native 实现下拉自动切换分类

如图所示，整体为 FlatList，顶部分类栏吸顶，底部为 feed 流。要实现下拉商品列表到底后，继续下拉，自动切换到一下个分类的效果。

代码层面，可以在 FlatList 的 onScrollEndDrag 中添加自动 Tab 切换函数，借助 FlatList 实例的内容区高度 contentLength，滑动偏移量 offset 和可视区高度 visibleLength 三者关系，实现下拉自动切换 Tab 功能。
// 页面布局相关
<FlatList
data = {[{banner:[]},{tab:[]},{goodList:[]}]}
renderItem={this.renderItem}
stickyHeaderIndices={(Platform.OS !== ‘web’)?[1]:null}
ListFooterComponent={this._renderFooter}
onScroll={this._onScroll} // 滑动监听
ref={this._setScrollRef}
keyExtractor = {(item, index) => {`hScrollView-${index}` }}
refreshing={this.state.isRefreshing}
onRefresh={this._onRefresh.bind(this)} // 下拉刷新
getItemLayout={(data, index) => (
{length: 305, offset: 305 * index, index}
)}
onScrollEndDrag = {()=>{ // 滑动到底监听函数
if(Platform.OS != ‘web’){
this._onScrollEndDragFun();
}
}}
/>

/**
* 获取 flatList 实例
* @param ref
* @private
*/
_setScrollRef = (ref) => {
this._secondGoodFlatListRef = ref;
};
import isEmpty from “lodash/isEmpty”;
import {Platform} from “react-native”;
import {JDDevice} from “@jdreact/jdreact-core-lib”;

/**
* 底部列表页滑动事件 实现上拉切换品类功能
* @param e
* @private
*/
_onScrollEndDragFun = (e) => {
let scrollMetrics = (this._secondGoodFlatListRef && this._secondGoodFlatListRef._listRef
&& this._secondGoodFlatListRef._listRef._scrollMetrics) || null;

let {contentLength = 0, offset = 0, visibleLength = 0} = scrollMetrics;
// console.log(‘===scrollMetrics’,scrollMetrics);
// // 判断是否最后一 Tab 如果是就不却换下个目录
// console.log(‘===this.props’,this.props);
// console.log(‘===this.state’,this.state);

if (contentLength && offset && visibleLength) {
let {selectedIndex = 0} = this.state; // 当前选中的三级分类 index
let {tabListData = []} = this.props;

if (!isEmpty(tabListData) && (selectedIndex + 1) < tabListData.length) {// 排除最后一个分类
let item = tabListData[selectedIndex + 1];
if (Platform.OS === ‘ios’) {
//IOS 系统存在弹性上拉
if (offset + visibleLength > contentLength + JDDevice.getRpx(100)) {
this._secondGoodFlatListRef.scrollToIndex({
animated: false,
index: 0,
viewOffset: 1,
viewPosition: 0
});
this.ItemCategory._clickCategoryTab2 && this.ItemCategory._clickCategoryTab2(item, selectedIndex + 1);
}
} else {
//android 无弹性滑动，滑动到底时，offset + visibleLength = contentLength。IOS 有弹性滑动，需要改变判断条件 lbs 2019-03-10
if (offset + visibleLength > contentLength – JDDevice.getRpx(10)) {
this._secondGoodFlatListRef.scrollToIndex({
animated: false,
index: 0,
viewOffset: 1,
viewPosition: 0
});
this.ItemCategory._clickCategoryTab2 && this.ItemCategory._clickCategoryTab2(item, selectedIndex + 1);
}
}
}

}
};

其中，contentLength 为内容区高度，offset 为滑动偏移量，visibleLength 为可视区高度。
关于三种高度定义，可参考 React Native 中 ListView 和 ScrollView 实现上拉加载

let scrollMetrics = (this._secondGoodFlatListRef && this._secondGoodFlatListRef._listRef
&& this._secondGoodFlatListRef._listRef._scrollMetrics) || null;

let {
contentLength = 0, // 内容区高度
offset = 0, // 滑动偏移量
visibleLength = 0 // 可视区高度
} = scrollMetrics;
对于 Android 平台，当 offset + visibleLength = contentLength 时，表示滑动到底部。为了以前进行切换，对条件进行修正，当滑动到距离底部 10px 时，触发切换 Tab 函数，如下代码所示
//android 无弹性滑动，滑动到底时，offset + visibleLength = contentLength。IOS 有弹性滑动，需要改变判断条件 lbs 2019-03-10
if (offset + visibleLength > contentLength – JDDevice.getRpx(10)) {
this._secondGoodFlatListRef.scrollToIndex({
animated: false,
index: 0,
viewOffset: 1,
viewPosition: 0
});
// 切换 Tab
this.ItemCategory._clickCategoryTab2 && this.ItemCategory._clickCategoryTab2(item, selectedIndex + 1);
}
对于 IOS 平台，因为 IOS 系统存在弹性上拉，如下图所示。因此对滑动到底条件修正为 offset + visibleLength > contentLength + JDDevice.getRpx(100)。
其中，JDDevice.getRpx(100) 表示弹性上拉的高度，即下图中红色框的高度。

if (Platform.OS === ‘ios’) {
if (offset + visibleLength > contentLength + JDDevice.getRpx(100)) {
this._secondGoodFlatListRef.scrollToIndex({
animated: false,
index: 0,
viewOffset: 1,
viewPosition: 0
});
this.ItemCategory._clickCategoryTab2 && this.ItemCategory._clickCategoryTab2(item, selectedIndex + 1);
}
}