在FlatList水平分页中,可以通过使用FlatList组件的onViewableItemsChanged属性来实现仅动态显示当前可见的项,而不是其他隐藏项。
具体步骤如下:
import React, { useState } from 'react';
import { FlatList } from 'react-native';
const MyComponent = () => {
const [visibleIndex, setVisibleIndex] = useState(0);
// 其他代码...
return (
<FlatList
data={yourData}
horizontal
pagingEnabled
onViewableItemsChanged={({ viewableItems }) => {
// 获取当前可见的项的索引
const currentIndex = viewableItems[0].index;
setVisibleIndex(currentIndex);
}}
viewabilityConfig={{
itemVisiblePercentThreshold: 50, // 可见项的阈值,可根据需求进行调整
}}
// 其他属性...
/>
);
};
export default MyComponent;
通过以上步骤,你就可以在FlatList水平分页中仅动态显示当前可见的项,而不是其他隐藏项。在可见项发生变化时,你可以通过visibleIndex状态变量来获取当前可见项的索引,从而进行相应的操作。
注意:以上代码示例中,并未提及具体的腾讯云产品和产品介绍链接地址,因为在这个问题中并没有涉及到与腾讯云相关的内容。如果你有其他与腾讯云相关的问题,可以提供具体的问题描述,我将尽力给出完善且全面的答案。
领取专属 10元无门槛券
手把手带您无忧上云