React Native中如何获取FlatList当前激活项的索引？

针对你给出的横向分页FlatList，这里提供两种靠谱的方式获取当前激活项的索引：

方法一：通过滚动偏移量计算 #

因为你的FlatList开启了pagingEnabled，每个列表项的宽度应该和容器宽度一致，所以可以直接通过滚动的偏移量算出当前索引：

1. 先获取容器宽度（比如用屏幕宽度）：

import { Dimensions } from 'react-native';
const containerWidth = Dimensions.get('window').width;

2. 修改你的onScroll函数：

const onScroll = (event) => {
  const scrollOffsetX = event.nativeEvent.contentOffset.x;
  // 用偏移量除以项宽度，取整得到当前索引
  const currentIndex = Math.round(scrollOffsetX / containerWidth);
  // 这里可以把索引存到状态里，或者做其他业务处理
  console.log('当前激活索引：', currentIndex);
};

如果你的列表项宽度不是屏幕宽度，把containerWidth替换成实际的项宽度即可。

方法二：用FlatList自带的可见项监听（更精准） #

FlatList提供了onViewableItemsChanged属性，能直接拿到当前可见的列表项，配合配置项可以精准定位激活索引：

1. 定义可见性判断规则：

const viewabilityConfig = {
  // 当项的可见区域超过50%时，视为当前激活项
  viewAreaCoveragePercentThreshold: 50,
};

2. 编写监听函数：

const handleViewableItemsChanged = ({ viewableItems }) => {
  if (viewableItems.length > 0) {
    // 取第一个可见项的索引，就是当前激活的项
    const currentIndex = viewableItems[0].index;
    console.log('当前激活索引：', currentIndex);
    // 可将索引存入组件状态
    // setActiveIndex(currentIndex);
  }
};

3. 给FlatList添加这两个属性：

<FlatList
  data={Images}
  renderItem={({item}) => <Item item={item} />}
  keyExtractor={item => item.index}
  horizontal
  showsHorizontalScrollIndicator={false}
  pagingEnabled
  onScroll={onScroll}
  decelerationRate={-100000000000000}
  scrollEventThrottle={16}
  // 新增属性
  viewabilityConfig={viewabilityConfig}
  onViewableItemsChanged={handleViewableItemsChanged}
/>

这种方法比滚动偏移计算更可靠，尤其是在滚动结束、项宽度不一致的场景下，能准确识别出当前视口的核心项。

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