如何在本机列表中获取行索引在本机中

问题描述 投票:0回答:2

[我在我的React Native应用程序中使用一个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开始,这是随机的。

reactjs react-native carousel react-native-flatlist
2个回答
0
投票

索引已在renderItem中传递。

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

0
投票

读取docsrenderItem,在回调参数对象中提供索引。

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}                
       />
   )}
/>

[如果我不得不猜测使用计数器的“跳跃性”,可能与单位列表对虚拟化的使用有关。 Flatlist是VirtualizedList周围的便利包装。

© www.soinside.com 2019 - 2024. All rights reserved.