React Native中基于Firebase 9实现评论组件无限滚动的问题

核心思路 #

Firebase 无法直接对文档内的数组做分页查询，因此我们需要先获取完整的评论数组，在前端实现分页逻辑，配合 React Native 的 FlatList 完成无限滚动。

步骤1：调整状态变量 #

新增分页相关状态，区分全部评论和当前展示的评论，同时管理加载状态：

import { useState, useEffect } from 'react';
import { FlatList, ActivityIndicator, View } from 'react-native';
import { doc, onSnapshot } from 'firebase/firestore';

// 状态定义
const [allComments, setAllComments] = useState([]);
const [displayedComments, setDisplayedComments] = useState([]);
const [isLoaded, setIsLoaded] = useState(false);
const [isLoadingMore, setIsLoadingMore] = useState(false);
const PAGE_SIZE = 5; // 每次加载5条
const [currentOffset, setCurrentOffset] = useState(0); // 当前加载的起始偏移量

步骤2：修改评论获取逻辑 #

保持实时监听文档变化，拿到完整评论数组后先按时间降序排序，再初始化展示前5条：

const getComments = async () => {
  try {
    setIsLoaded(false);
    const docRef = doc(db, "dailyTips", id);

    const unsubscribe = onSnapshot(docRef, (snapshot) => {
      const rawComments = snapshot?.data().comments || [];
      // 按时间降序排序，处理time为空的情况避免报错
      const sortedComments = rawComments.sort((a, b) => {
        const timeA = a.time ? Number(a.time) : 0;
        const timeB = b.time ? Number(b.time) : 0;
        return timeB - timeA;
      });
      
      setAllComments(sortedComments);
      // 首次加载时初始化展示前5条
      setDisplayedComments(sortedComments.slice(0, PAGE_SIZE));
      setCurrentOffset(PAGE_SIZE);
      setIsLoaded(true);
    });

    return unsubscribe;
  } catch (error) {
    console.error(error);
  }
};

useEffect(() => {
  const unsubscribe = getComments();
  return unsubscribe;
}, [id]);

步骤3：实现加载更多函数 #

从全部评论中截取下一页内容，更新展示列表：

const loadMoreComments = () => {
  // 无更多评论或正在加载时直接返回
  if (isLoadingMore || currentOffset >= allComments.length) return;
  
  setIsLoadingMore(true);
  const nextOffset = currentOffset + PAGE_SIZE;
  const newComments = allComments.slice(currentOffset, nextOffset);
  
  // 合并到已展示列表
  setDisplayedComments(prev => [...prev, ...newComments]);
  setCurrentOffset(nextOffset);
  setIsLoadingMore(false);
};

步骤4：改用FlatList实现无限滚动 #

替换原有的map渲染，利用FlatList的onEndReached触发加载更多，底部添加加载指示器：

if (!isLoaded) {
  return <ActivityIndicator size="large" color="#0000ff" />;
}

return (
  <FlatList
    data={displayedComments}
    // 用用户ID+时间戳生成唯一key，避免组件复用问题
    keyExtractor={(item) => `${item.user}-${item.time}`}
    renderItem={({ item }) => (
      <SingleComment comment={item} matchId={id} />
    )}
    onEndReached={loadMoreComments}
    onEndReachedThreshold={0.1} // 滚动到距离底部10%时触发加载
    ListFooterComponent={() => (
      isLoadingMore ? (
        <View style={{ paddingVertical: 15 }}>
          <ActivityIndicator size="small" color="#0000ff" />
        </View>
      ) : null
    )}
  />
);

额外优化：实时新增评论处理 #

如果有新评论实时加入，直接插入到展示列表顶部，避免重置分页：

// 修改onSnapshot内的逻辑
const unsubscribe = onSnapshot(docRef, (snapshot) => {
  const rawComments = snapshot?.data().comments || [];
  const sortedComments = rawComments.sort((a, b) => {
    const timeA = a.time ? Number(a.time) : 0;
    const timeB = b.time ? Number(b.time) : 0;
    return timeB - timeA;
  });

  // 检测新增评论
  if (sortedComments.length > allComments.length) {
    const newCount = sortedComments.length - allComments.length;
    const newComments = sortedComments.slice(0, newCount);
    // 插入到展示列表顶部
    setDisplayedComments(prev => [...newComments, ...prev]);
  }

  setAllComments(sortedComments);
  if (allComments.length === 0) {
    setDisplayedComments(sortedComments.slice(0, PAGE_SIZE));
    setCurrentOffset(PAGE_SIZE);
  }
  setIsLoaded(true);
});

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