如何将FlatList拆分为多页，实现每页固定展示指定数量条目的效果

FlatList本身没有内置固定条数分页切换的能力，但是通过动态处理传给组件的数据源就可以快速实现，你已经准备好分页按钮的情况下改造成本极低，具体步骤如下：

1. 定义基础常量与状态 #

首先固定每页展示条数，同时声明当前页码、全量数据源两个状态（以React写法为例）：

// 每页最多展示5条，可自行调整
const PAGE_SIZE = 5;
// 当前页码，默认从第一页开始
const [currentPage, setCurrentPage] = useState(1);
// 你的全量列表数据源
const [fullData, setFullData] = useState([]);

2. 计算当前页需要渲染的数据 #

根据当前页码对全量数据做切片，只把当前页要展示的数据传给FlatList：

const startIndex = (currentPage - 1) * PAGE_SIZE;
const endIndex = startIndex + PAGE_SIZE;
// 当前页渲染的切片数据
const currentPageData = fullData.slice(startIndex, endIndex);

3. 替换FlatList的数据源 #

FlatList其他原有配置不用修改，只需要把data属性替换成上面计算出的当前页数据即可：

<FlatList
  data={currentPageData}
  renderItem={({item}) => /* 沿用你原有条目渲染逻辑 */}
  keyExtractor={item => item.id}
  // 其余原有配置保持不变
/>

4. 绑定分页按钮逻辑 #

你自己实现的分页按钮只需要修改currentPage状态即可完成切换，注意加上边界判断避免越界：

• 上一页按钮：仅在currentPage > 1时可点击，点击执行setCurrentPage(prev => prev - 1)
• 下一页按钮：仅在currentPage < Math.ceil(fullData.length / PAGE_SIZE)时可点击，点击执行setCurrentPage(prev => prev + 1)
• 页码跳转按钮：直接传入目标页码调用setCurrentPage(目标页码)即可

优化提示 #

如果需要切换页码后自动回到列表顶部，可以给FlatList绑定ref，切换页码时调用滚动方法：

const flatListRef = useRef(null);
// 切换页码后执行
flatListRef.current?.scrollToOffset({offset: 0, animated: false})

// FlatList绑定ref
<FlatList ref={flatListRef} {/* 其余配置 */} />

内容的提问来源于stack exchange，提问作者CODEforDREAM