如何从React FlatList中的滚动位置获得可见项索引？
如何从React FlatList中的滚动位置获得可见项索引？
提问于 2021-12-15 01:07:33
我有一个水平的FlatList，在这里我呈现一个集合，现在我想知道哪个项在视图(索引)中，考虑到每个项的宽度几乎等于设备的宽度，比如400，如何在我的onScroll方法上获得可见的项索引？
<FlatList scrollEventThrottle={16} onScroll={handleScroll} showsHorizontalScrollIndicator={false} style={{ width:'100%', '}}
horizontal={true} data={categories} keyExtractor={item => item.toString()}
renderItem={({ item, index }) =>
<TouchableOpacity style={{ width:400,height:275 }}>{ item }</Text>
</TouchableOpacity>}
/> handleScroll方法：
const handleScroll = (event) => {
console.log(event.nativeEvent.contentOffset.x);
};Stack Overflow用户
发布于 2021-12-15 04:44:53
你可以使用FlatList onViewableItemsChanged螺旋桨来得到你想要的东西。
const _onViewableItemsChanged = React.useCallback(({ viewableItems, changed }) => {
console.log("Visible items are", viewableItems);
console.log("Changed in this iteration, ", changed);
}, []);
const _viewabilityConfig = {
itemVisiblePercentThreshold: 60
}
<FlatList
scrollEventThrottle={16}
showsHorizontalScrollIndicator={false}
style={{ width: '100%' }}
horizontal={true}
data={categories}
onViewableItemsChanged={_onViewableItemsChanged}
viewabilityConfig={_viewabilityConfig}
keyExtractor={item => item.toString()}
renderItem={({ item, index }) =>
<TouchableOpacity style={{ width: 400, height: 275 }}><Text>{item}</Text>
</TouchableOpacity>}
/>
viewabilityConfig可以通过可视设置帮助您制作任何您想要的东西。在代码示例60中，如果超过60 %的项是可见的，则该项被认为是可见的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70357381
复制相关文章
相似问题
腾讯云开发者
