如何在React Native中从FlatList的滚动位置获得可见项目索引

Question

我有一个水平的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);

};

Answer 1

您可以使用ViewableItemsChanged道具上的FlatList来获得您想要的东西。

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

可视性配置可以帮助您使用可视性设置进行任何您想要的设置。在代码示例中，60表示如果该项可见的时间超过60%，则该项被视为可见。