我想檢測螢屏FlatList上顯示的專案，在聚焦 2 秒后渲染該專案的附加視圖。（如在 Instagram 中提交的評論）
換句話說，我想PostItem在 2 秒后呈現它在螢屏上顯示的附加視圖。我嘗試添加setTimeout在useEfect制作該組件可見。但是PostIteminFlatList和所有串列同時渲染，2 秒后所有 PostItems 都有這個組件。
有什么解決辦法嗎？如果解決方案是使用onViewableItemsChanged?prop in FlatList，如何用這個 prop 來實作？
這是我的 FlatList 組件：
const _renderItem: ListRenderItem<Post> = ({item}) => {
return <PostItem {...item} />;
};
<FlatList
data={data}
keyExtractor={keyExtractor}
renderItem={_renderItem}
onEndReached={_onEndReached}
onEndReachedThreshold={0.2}
contentContainerStyle={styles.list}
/>
uj5u.com熱心網友回復：
您可以使用獲取元素的索引并在資料陣列中找到它
const onItemIndexChange = useCallback(setHourIndex, []);
const ITEM_HEIGHT = height_of_one_item_rendered
onMomentumScrollEnd={(ev) => {
const newIndex = Math.round(ev.nativeEvent.contentOffset.y / ITEM_HEIGHT);
if (onItemIndexChangeHour) {
onItemIndexChange(newIndex 1);
}
}}
uj5u.com熱心網友回復：
您可以使用可見性傳感器組件包裝 renderItem
https://www.npmjs.com/package/@svanboxel/visibility-sensor-react-native
uj5u.com熱心網友回復：
您可以使用onViewableItemsChangedFlatlist 屬性https://reactnative.dev/docs/flatlist#onviewableitemschanged
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/403678.html
標籤：