[我在我的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开始,这是随机的。
索引已在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}
/>
)}
/>
读取docs的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是VirtualizedList
周围的便利包装。