如何获取FlatList滚动停止并吸附后当前被吸附item的索引

完全可以借助onMomentumScrollEnd实现需求，该事件会在滚动动量完全消失、页面停止滚动且吸附对齐完成后触发，仅执行一次，不会出现onViewableItemsChanged频繁触发导致的性能问题。

你已经配置了snapToOffsets为每个item的偏移量，滚动停止后的偏移值必然是单个item高度的整数倍，直接通过滚动偏移计算即可拿到当前吸附的item索引，实现代码如下：

import { useState, useRef } from 'react';
import { FlatList } from 'react-native';

// 替换为你实际的单个item高度
const ITEM_HEIGHT = 120;

const YourComponent = () => {
  const Scrollref = useRef();
  // 存储当前吸附的item索引，初始值可传入你配置的initialScrollIndex
  const [activeSnapIndex, setActiveSnapIndex] = useState(initialScrollIndex);

  const handleScrollEnd = (e) => {
    const offsetY = e.nativeEvent.contentOffset.y;
    // 吸附场景下偏移值为ITEM_HEIGHT整数倍，四舍五入避免浮点误差
    const currentIndex = Math.round(offsetY / ITEM_HEIGHT);
    // 索引无变化时不执行逻辑，进一步优化性能
    if (currentIndex === activeSnapIndex) return;
    setActiveSnapIndex(currentIndex);
    // 此处写你拿到索引后的业务逻辑
  };

  return (
    <FlatList
      data={Data}
      ref={Scrollref}
      renderItem={/* 你的renderItem逻辑 */}
      keyExtractor={/* 你的key提取逻辑 */}
      getItemLayout={/* 你的getItemLayout逻辑 */}
      initialScrollIndex={initialScrollIndex}
      initialNumToRender={3}
      snapToOffsets={Data.map((x, i) => i * ITEM_HEIGHT)}
      // 新增滚动结束回调
      onMomentumScrollEnd={handleScrollEnd}
      // 可选配置：降低滚动减速速率，让吸附更快完成，体验更好
      decelerationRate="fast"
    />
  );
};

注意事项 #

• 如果你的列表是横向滚动，把contentOffset.y替换为contentOffset.x、ITEM_HEIGHT替换为单个item的宽度即可。
• 如果列表有头部占位、内容边距等偏移，计算时需要把对应偏移值纳入公式调整即可。
• 如果你没有配置getItemLayout也可以用该方案，吸附对齐完成后偏移值的误差可以通过Math.round自动修正。

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