如何在 react-native FlatList 中检测屏幕上的项目？答案

【问题标题】：How to detect what item is on the screen in react-native FlatList?如何在 react-native FlatList 中检测屏幕上的项目？
【发布时间】：2022-01-04 10:53:58
【问题描述】：

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

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

有什么解决办法吗？如果解决方案是在FlatList 中使用onViewableItemsChanged 属性，如何使用这个属性来实现？

这是我的 FlatList 组件：

const _renderItem: ListRenderItem<Post> = ({item}) => {
  return <PostItem {...item} />;
};

<FlatList
  data={data}
  keyExtractor={keyExtractor}
  renderItem={_renderItem}
  onEndReached={_onEndReached}
  onEndReachedThreshold={0.2}
  contentContainerStyle={styles.list}
/>

【问题讨论】：

标签： reactjs react-native react-native-flatlist flatlist

【解决方案1】：

您可以获取元素的索引并在您的数据数组中使用

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

您可以使用onViewableItemsChanged Flatlist 属性https://reactnative.dev/docs/flatlist#onviewableitemschanged

【讨论】：