如何防止 FlatList 项目在粘性 ListHeaderComponent 下方滚动答案

【问题标题】：How to prevent FlatList items from scrolling underneath sticky ListHeaderComponent如何防止 FlatList 项目在粘性 ListHeaderComponent 下方滚动
【发布时间】：2021-10-22 18:24:08
【问题描述】：

我有一个FlatList 和一个ListHeaderComponent，它是水平滚动中的多个按钮。我已将这些按钮设置为粘性，使其在滚动过程中保持在顶部，但有没有办法防止滚动项目在我向上滚动时显示在按钮下方？我尝试将marginBottom 添加到ListHeaderComponentStyle，但它不起作用。我希望这些项目在 ListHeaderComponent 下方开始消失，我该怎么做？

<FlatList
        style={{marginTop: 50}}
        data={data}
        ListHeaderComponent={
          <FilterOptionButtons/>
        }
        ListHeaderComponentStyle={{ marginBottom: 50 }}  // does not add m
        stickyHeaderIndices={[0]}
        keyExtractor={(item) => item.id}
        renderItem={renderItems}
        contentContainerStyle={styles.flatListContainer}
      />

【问题讨论】：

标签： react-native

【解决方案1】：

您可以将backgroundColor 样式添加到ListHeaderComponent。目前它是透明的，这就是项目显示在其下方的原因。

另外，我认为最好只为<FilterOptionButtons /> 的容器添加样式而不是使用ListHeaderComponentStyle。

【讨论】：