React Native分页改造：将传统页码切换改为滚动自动加载

嘿，刚好我前段时间把项目里的传统分页改成了无限滚动，适配移动端体验的效果特别好，给你分享具体的实现步骤和注意事项：

核心思路 #

去掉页码后，我们需要监听列表滚动位置，当用户滚动到接近底部时，自动发起下一页的请求，同时要处理「加载状态」「避免重复请求」「最后一页判断」这几个关键问题。推荐用React Native的FlatList组件来实现，它内置了滚动监听和性能优化，比手动处理ScrollView更省心。

具体实现步骤 #

1. 调整状态管理 #

首先定义需要的状态，替换原来的页码数组相关状态：

import { useState, useEffect } from 'react';
import { FlatList, ActivityIndicator, View, Text } from 'react-native';

const YourComponent = () => {
  // 当前页码
  const [pageNo, setPageNo] = useState(1);
  // 总数据列表（用来存储所有加载过的页数据）
  const [dataList, setDataList] = useState([]);
  // 是否正在加载（防止重复请求）
  const [isLoading, setIsLoading] = useState(false);
  // 是否还有更多数据可加载
  const [hasMore, setHasMore] = useState(true);
  // 每页条数（固定50）
  const pageSize = 50;
  // 总记录数（第一次请求接口后从返回值中获取）
  const [totalRecords, setTotalRecords] = useState(0);

2. 封装数据请求函数 #

写一个通用的请求函数，处理数据追加、页码更新和最后一页判断：

const fetchData = async () => {
    // 正在加载或无更多数据时，直接返回
    if (isLoading || !hasMore) return;
    
    setIsLoading(true);
    try {
      // 调用你的分页接口
      const response = await fetch(`www.URL.com/api/GetAll?pageNo=${pageNo}`);
      const result = await response.json();
      
      // 第一次请求时，保存总记录数（假设接口返回格式是 { data: [...], total: 1000 }）
      if (pageNo === 1) {
        setTotalRecords(result.total);
      }
      
      // 将新页数据追加到现有列表
      setDataList(prevList => [...prevList, ...result.data]);
      
      // 更新页码
      const nextPage = pageNo + 1;
      setPageNo(nextPage);
      
      // 判断是否还有更多数据：已加载总数 >= 总记录数时，停止加载
      setHasMore(dataList.length + result.data.length < totalRecords);
    } catch (error) {
      console.error('加载数据失败:', error);
      // 可以在这里加错误提示，比如Toast
    } finally {
      setIsLoading(false);
    }
  };

3. 初始加载与列表渲染 #

用useEffect做初始加载，然后用FlatList渲染列表，配置滚动触发加载的参数：

// 组件挂载时加载第一页数据
  useEffect(() => {
    fetchData();
  }, []);

  return (
    <FlatList
      // 总数据列表
      data={dataList}
      // 每条数据的唯一标识（根据你的数据结构调整）
      keyExtractor={(item) => item.id.toString()}
      // 列表项渲染组件（替换成你自己的UI）
      renderItem={({ item }) => (
        <View style={{ padding: 15, borderBottomWidth: 1, borderColor: '#eee' }}>
          <Text>{item.title}</Text>
          {/* 其他内容 */}
        </View>
      )}
      // 滚动到距离底部10%时触发加载
      onEndReachedThreshold={0.1}
      // 触发加载的回调
      onEndReached={fetchData}
      // 底部加载提示（加载中时显示）
      ListFooterComponent={() => (
        isLoading ? (
          <View style={{ paddingVertical: 20 }}>
            <ActivityIndicator size="small" color="#0066cc" />
          </View>
        ) : null
      )}
    />
  );
};

export default YourComponent;

关键注意事项 #

• 避免重复请求：一定要在fetchData开头判断isLoading和hasMore，防止用户快速滚动时多次触发请求。
• 总记录数的处理：确保第一次请求接口时，正确保存后端返回的totalRecords，用来判断是否还有更多数据。
• 筛选/重置场景：如果你的页面有筛选条件（比如搜索、分类切换），需要重置pageNo为1、清空dataList、重置hasMore为true，然后重新调用fetchData。
• 性能优化：FlatList已经做了虚拟列表优化，如果数据量极大，可以开启removeClippedSubviews属性，进一步提升性能。

如果你的项目里用的是ScrollView而不是FlatList，也可以通过监听onScroll事件手动计算滚动位置，但FlatList的内置实现更稳定，优先推荐～

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