如何知道 flatlist 在 react native 中何时超出视口？答案

【问题标题】：how to know when flatlist goes out of viewport in react native?如何知道 flatlist 在 react native 中何时超出视口？
【发布时间】：2022-01-06 05:56:54
【问题描述】：

我有一个屏幕，其中包含使用平面列表显示的项目列表，平面列表如下：

  <FlatList
        scrollEnabled
        removeClippedSubviews
        windowSize={21}
        stickySectionHeadersEnabled={false}
        showsVerticalScrollIndicator={false}
        keyExtractor={keyExtractor}
        getItemLayout={getItemLayoutFun}
        ListHeaderComponent={listFTUEHeader}
        contentContainerStyle={{ flexGrow: 1 }}
        data={DISCOVERY_SECTION_LIST}
        renderItem={renderItem}
        onRefresh={onRefresh}
        refreshing={false}
        viewabilityConfig={viewabilityConfig}
        ListFooterComponent={EndOfListText}
        onScroll={onScroll}
      />

我想检测 ListHeaderComponent 何时超出视口或 item[1] 何时位于屏幕顶部，因此我想添加一个状态。

我已阅读文档但找不到方法，希望能从这里获得任何线索。

任何线索都会有所帮助，在此先感谢您。

【问题讨论】：

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

【解决方案1】：

我处于完全相同的情况，到目前为止，我只能找到一个解决方案来检查特定项目是否在视口中，但对 ListHeaderComponent 却一无所知。

FlatList 有一个名为onViewableItemsChanged 的道具，您可以轻松实现它。当您滚动 FlatList 时，FlatList 上显示的项目会发生变化。然后，调用这个函数，告诉你当前的 viewableItems 是什么，改变的项目是什么。

更多解释请参见this article。

也许这可以帮助您更接近适合您的解决方案？！

【讨论】：