React Native FlatList触发onEndReached分页加载时跳至列表顶部问题
以下按优先级依次排查修复:
1. 避免上拉加载时修改refreshing属性
refreshing是下拉刷新专属状态,仅在用户主动触发下拉刷新时可设为true,上拉加载分页数据时如果修改该属性,FlatList会判定为下拉刷新完成,自动滚动到顶部。
你当前代码里refreshing绑定了fetchingStatus,如果getJobsList(false)(上拉加载)逻辑里修改了fetchingStatus为true,就会触发该问题。
修复方式:
- 单独声明
isLoadingMore状态变量控制上拉加载态,不要和下拉刷新的状态共用 - 仅当
getJobsList入参为true(下拉刷新)时,才修改refreshing对应的状态值
2. 修正extraData写法
FlatList的extraData仅支持传入单个变量作为额外渲染依赖,你当前用逗号分隔多个变量的写法,实际上逗号运算符只会返回最后一个stateChanged作为依赖,其余状态更新无法触发FlatList正确重渲染,会导致布局重计算时跳转顶部。
修复方式:将多个依赖打包为单个对象传入,且jobList.jobs已经作为data属性传入,不需要重复加入:
extraData={{fetchingStatus, savedIds, stateChanged}}
3. 给FlatList父容器设置固定渲染区域
如果包裹FlatList的父View没有设置固定高度或者flex:1,每次加载更多数据时父容器高度会随内容长度自动撑开,FlatList会重新计算整体布局,触发滚动位置重置。
修复方式:给父容器添加flex:1样式:
<View style={[localStyles.container, {flex: 1}]}>
4. 确保keyExtractor返回值唯一
你当前的keyExtractor仅将jid转字符串作为key,如果分页数据中存在重复jid,会导致FlatList复用item逻辑出错,触发位置跳转。
修复方式:可拼接索引保证key全局唯一:
keyExtractor={(item, index) => `${item.jid}_${index}`}
5. 优化数组更新逻辑
concat会返回全新的数组引用,部分旧版本RN中整组替换data对应的数组引用时,可能触发FlatList全量重渲染导致跳顶。
修复方式:改用push增量合并数组后再更新状态:
request.processRequest().then((value) => { this.jobs.push(...value.jarr) this.notify(); }).catch((error) => { console.log("campus err", error) this.notify(); });
内容的提问来源于stack exchange,提问作者Fullmetal

