如何检测反应本机 FlatList 中屏幕上的项目？

Question

我想检测 FlatList 中屏幕上显示的项目在聚焦 2 秒后在该项目中呈现附加视图。（就像在 instagram 中提交的评论）

换句话说，我想在屏幕上显示 2 秒后向 PostItem 呈现一个附加视图。我尝试在 useEfect 中添加 setTimeout 以使该组件可见。但是 FlatList 中的 PostItem 和所有列表同时呈现，并且在 2 秒后所有 PostItems 都有这个组件。

有什么解决办法吗？如果解决方案是在 FlatList 中使用 onViewableItemsChanged prop，如何使用此 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}
/>

Answer 1

您可以使用可见性传感器组件包装您的 renderItem

https://www.npmjs.com/package/@svanboxel/visibility-sensor-react-native

Answer 2

您可以使用 onViewableItemsChanged 平面列表属性 https://reactnative.dev/docs/flatlist#onviewableitemschanged

Answer 3

您可以使用

获取元素的索引并在您的数据数组中找到它

  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);
          }
        }}

如何检测反应本机 FlatList 中屏幕上的项目？

How to detect what item is on the screen in react-native FlatList?

reactjs

react-native

react-native-flatlist

flatlist