React Native中SectionList滚动时如何获取吸顶头部的索引

核心实现思路 #

利用SectionList原生暴露的onViewableItemsChanged回调，结合可见项的判断规则，直接获取当前处于吸顶状态的分组对应数据。

具体实现步骤 #

• 第一步：提前定义存储当前吸顶分组日期的变量，以及视图可变性配置

// 存储当前吸顶的分组日期
const [currentStickyDate, setCurrentStickyDate] = useState('');

// 视图可见性配置，可根据你的列表项高度调整参数
const viewabilityConfig = useRef({
  // 当分组头部有50%以上处于可见区域时，判定为当前激活分组
  viewAreaCoveragePercentThreshold: 50,
  // 仅监听分组头部的可见性变化，减少不必要的触发
  itemVisiblePercentThreshold: 50
}).current;

• 第二步：实现onViewableItemsChanged回调逻辑

const handleViewableItemsChanged = useCallback(({ viewableItems }) => {
  // 过滤出可见的section头部项，AgendaList的section头部默认type为'sectionHeader'
  const visibleSections = viewableItems.filter(item => item.type === 'sectionHeader');
  if (visibleSections.length > 0) {
    // 数组第一个可见的头部就是当前吸顶的分组
    const currentSection = visibleSections[0].section;
    // 这里的date替换成你分组数据里日期对应的字段名
    const currentDate = currentSection.date;
    if (currentDate !== currentStickyDate) {
      setCurrentStickyDate(currentDate);
      // 同步更新日历的选中日期
      setCalendarSelectedDate(currentDate);
    }
  }
}, [currentStickyDate]);

• 第三步：给SectionList/AgendaList绑定对应属性

<AgendaList
  sections={yourSectionData} // 你的按日期分组的列表数据
  stickySectionHeadersEnabled={true} // 开启吸顶，默认是开启状态
  viewabilityConfig={viewabilityConfig}
  onViewableItemsChanged={handleViewableItemsChanged}
  // 其他你原有配置的属性
  renderSectionHeader={yourRenderHeaderFunc}
  renderItem={yourRenderItemFunc}
/>

边界情况处理 #

• 如果列表快速滚动出现回调触发延迟，可以调整viewabilityConfig里的minimumViewTime参数，设置为100（单位毫秒），避免频繁触发
• 如果你用的第三方封装的AgendaList的section头部type和默认不一致，可以在renderSectionHeader返回的组件上添加自定义标识，比如data-type="section-header"，然后在handleViewableItemsChanged里通过item.item拿到对应标识进行过滤

注意：如果要兼容低版本React Native，需要确认你使用的版本是否支持onViewableItemsChanged的type字段返回，0.60+版本均原生支持该特性。

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