如何在 React Native 中获取 Flatlist 中的行索引

Question

我在我的 React 本机应用程序中使用 Flatlist 来显示图像轮播，我需要将某种计数器（索引）传递给显示的每个项目。

这是我的代码，我需要将索引传递给 imgCounter 参数

<FlatList
   horizontal={true}
   data={data}
   pagingEnabled 
   keyExtractor={(item) => item.id.toString()}           
   renderItem={(itemData) => (             
       <HomeGalleryItem
          id={itemData.item.id}
          imgCounter={???}
          backdrop={itemData.item.backdrop_path}                
          title={itemData.item.title}                
       />
   )}
/>

我尝试将计数器设置为

let counter=0

然后在 Flatlist 中使用它作为

imgCounter={counter++}

但它并不总是从 0 开始，它有点随机。

Answer 1

阅读 docs for renderItem，在回调参数对象中提供索引。

renderItem({ item, index, separators });

您将参数命名为 itemData，因此可以通过 itemData.index 访问它。

<FlatList
  horizontal={true}
  data={data}
  pagingEnabled 
  keyExtractor={(item) => item.id.toString()}           
  renderItem={(itemData) => (             
    <HomeGalleryItem
      id={itemData.item.id}
      imgCounter={itemData.index}
      backdrop={itemData.item.backdrop_path}                
      title={itemData.item.title}                
    />
  )}
/>

如果我不得不猜测 "jumpiness" 使用计数器，那可能与 flatlist 对虚拟化的使用有关。 Flatlist 是 VirtualizedList.

的便利包装器

Answer 2

索引已经传入 renderItem。

<FlatList
  horizontal={true}
  data={data}
  pagingEnabled 
  keyExtractor={(item) => item.id.toString()}           
  renderItem={(itemData) => (             
    <HomeGalleryItem
      id={itemData.item.id}
      imgCounter={itemData.index}
      backdrop={itemData.item.backdrop_path}                
      title={itemData.item.title}                
    />
  )}
/>

如何在 React Native 中获取 Flatlist 中的行索引

How do I get the row index in a Flatlist in react native

carousel

reactjs

react-native

react-native-flatlist