reactjs 如何在react native中获取Flatlist中的行索引

6rvt4ljy 于 2023-05-28 发布在 React

关注(0)|答案(3)|浏览(141)

我在我的react native应用程序中使用Flatlist来显示图像carousel，我需要向显示的每个项目传递某种计数器（索引）。
这是我的代码，我需要一个索引传递给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

然后在平面列表中将其用作

imgCounter={counter++}

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

reactjs

来源：https://stackoverflow.com/questions/61834372/how-do-i-get-the-row-index-in-a-flatlist-in-react-native

3条答案

按热度按时间

eit6fx6z1#

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

如果我不得不猜测使用计数器的“跳跃性”，那么它可能与flatlist对虚拟化的使用有关。Flatlist是VirtualizedList的一个便利 Package 器。

赞(0）回复(0）举报 2023-05-28

q5iwbnjs2#

索引已在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}                
    />
  )}
/>

赞(0）回复(0）举报 2023-05-28

wwodge7n3#

我喜欢将它与snapToAlignment一起使用，这样我就可以传递一个字符串来定位项目，在开始、中心或结束

<FlatList
    initialNumToRender={1}
    snapToAlignment="start"
    pagingEnabled
    showsHorizontalScrollIndicator={false}
    data={data}
    renderItem={({item})=>(...)}
    horizontal={true}
  />

赞(0）回复(0）举报 2023-05-28

我来回答

reactjs 如何在react native中获取Flatlist中的行索引

3条答案

相关问题

热门标签

最新问答