如何知道哪个项目在 FlatList 中完全可见或聚焦？

Question

我的场景是，我有一堆卡片，它们都是使用FlatList 渲染的。卡片几乎填满了屏幕宽度，我们可以看到上一张和下一张卡片的一小部分。有什么方法可以知道哪个项目当前在 FlatList 中可见或聚焦，以便我可以添加一些突出显示或模糊其他项目。

Answer 1

您可以为此使用 Flatlist 的 onViewableItemsChanged 属性。

示例 ::

    onViewableItemsChanged = ({ viewableItem, changed }) => {
    console.log("Visible item", viewableItems);
    console.log("iteration", changed);
  }

<FlatList
onViewableItemsChanged={onViewableItemsChanged }
viewabilityConfig={{
itemVisiblePercentThreshold: 50
}}
      />