React Native中如何处理SectionList的onEndReached事件？

嘿，这个场景我之前做项目时刚好遇到过，给你分享下我实测有效的解决方案～

核心思路 #

SectionList的onEndReached本身不会直接告诉你触发加载的是哪个分区，所以我们需要结合onViewableItemsChanged来跟踪当前滚动到的分区，再针对不同分区执行对应的加载逻辑。

具体步骤 #

1. 给每个分区添加唯一标识 #

先在你的sections数组里，给每个分区加一个唯一的ID（比如id字段），方便后续区分：

const sections = [
  {
    title: "列表A",
    data: listAData,
    id: "sectionA" // 唯一标识
  },
  {
    title: "列表B",
    data: listBData,
    id: "sectionB"
  }
];

2. 跟踪当前可见的最后一个分区 #

使用onViewableItemsChanged回调，实时记录当前可见区域的最后一个分区ID，存到状态里：

import { useState, useCallback } from 'react';
import { SectionList } from 'react-native';

const YourComponent = () => {
  const [lastVisibleSectionId, setLastVisibleSectionId] = useState('');

  // 监听可见的分区变化
  const handleViewableItemsChanged = useCallback(({ viewableItems }) => {
    if (viewableItems.length > 0) {
      // 取最后一个可见的分区ID
      const lastVisibleSection = viewableItems[viewableItems.length - 1].section;
      setLastVisibleSectionId(lastVisibleSection.id);
    }
  }, []);

  // ...其他逻辑
};

3. 在onEndReached中区分分区处理 #

现在在onEndReached里，根据记录的lastVisibleSectionId判断要加载哪个分区的更多数据，同时建议加上加载状态防止重复触发：

const [isLoadingA, setIsLoadingA] = useState(false);
const [isLoadingB, setIsLoadingB] = useState(false);

// 加载列表A更多数据的函数
const loadMoreDataForSectionA = async () => {
  // 这里写你的加载逻辑，比如请求接口
  try {
    const newData = await fetchMoreDataForA();
    // 更新列表A的数据
    setSections(prev => prev.map(sec => 
      sec.id === 'sectionA' ? {...sec, data: [...sec.data, ...newData]} : sec
    ));
  } catch (err) {
    console.error('加载列表A失败:', err);
  }
};

// 加载列表B更多数据的函数
const loadMoreDataForSectionB = async () => {
  // 类似列表A的加载逻辑
  try {
    const newData = await fetchMoreDataForB();
    setSections(prev => prev.map(sec => 
      sec.id === 'sectionB' ? {...sec, data: [...sec.data, ...newData]} : sec
    ));
  } catch (err) {
    console.error('加载列表B失败:', err);
  }
};

// 处理滚动到底部的逻辑
const handleEndReached = () => {
  switch (lastVisibleSectionId) {
    case 'sectionA':
      if (!isLoadingA) {
        setIsLoadingA(true);
        loadMoreDataForSectionA().finally(() => {
          setIsLoadingA(false);
        });
      }
      break;
    case 'sectionB':
      if (!isLoadingB) {
        setIsLoadingB(true);
        loadMoreDataForSectionB().finally(() => {
          setIsLoadingB(false);
        });
      }
      break;
    default:
      break;
  }
};

4. 配置SectionList组件 #

最后把这些回调和状态绑定到SectionList上，记得设置viewabilityConfig来调整可见性判断的阈值：

<SectionList
  sections={sections}
  keyExtractor={(item, index) => `${item.id}-${index}`}
  renderItem={({ item, section }) => (
    // 根据分区ID渲染不同样式的item（如果需要的话）
    <View style={styles.itemContainer}>
      <Text>{item.content}</Text>
    </View>
  )}
  renderSectionHeader={({ section }) => (
    <View style={styles.headerContainer}>
      <Text style={styles.headerText}>{section.title}</Text>
    </View>
  )}
  onEndReached={handleEndReached}
  onEndReachedThreshold={0.1} // 当距离底部10%时触发加载
  onViewableItemsChanged={handleViewableItemsChanged}
  viewabilityConfig={{
    itemVisiblePercentThreshold: 50 // 当分区item可见50%时视为已进入可见区域
  }}
/>

注意事项 #

• onEndReachedThreshold的值可以根据需求调整，比如设为0.2就是距离底部20%时触发；
• 一定要加加载状态（isLoadingA/isLoadingB），避免用户快速滚动时多次触发加载请求；
• 如果你的分区数据量很小，可能会出现一次滚动触发多个分区的onEndReached，这时候可以结合滚动位置做更精确的判断，不过大部分场景用上面的方法就足够了。

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