如何避免FlatList的列表项滚动到吸顶的ListHeaderComponent下方

吸顶的 sticky 元素本质是脱离文档流的悬浮层，ListHeaderComponentStyle 里的 marginBottom 只会作用于头部未吸顶时的文档流布局，头部固定后不会和下方滚动的列表项产生间距，所以设置后不会生效。

方案1：头部高度固定（最简实现） #

如果提前知道 FilterOptionButtons 的实际高度，直接给 contentContainerStyle 添加对应数值的 paddingTop 即可，这个内边距会把整个列表内容整体向下偏移，刚好让出头部的占位空间，滚动时列表项就不会出现在头部下方。
修改后代码参考：

<FlatList
  style={{marginTop: 50}}
  data={data}
  ListHeaderComponent={<FilterOptionButtons/>}
  stickyHeaderIndices={[0]}
  keyExtractor={(item) => item.id}
  renderItem={renderItems}
  contentContainerStyle={{
    ...styles.flatListContainer,
    paddingTop: 60 // 替换为FilterOptionButtons的实际高度
  }}
/>

原来设置的 ListHeaderComponentStyle={{ marginBottom: 50 }} 可以直接删除，无实际作用。

方案2：头部高度动态 #

如果头部高度不固定（比如内容自适应、多端适配场景），可以通过 onLayout 事件先获取头部的实际高度，再动态设置列表内容的顶部内边距：

// 组件内先声明state存储头部高度
const [headerHeight, setHeaderHeight] = useState(0);

// 改造FlatList配置
<FlatList
  style={{marginTop: 50}}
  data={data}
  ListHeaderComponent={
    <View onLayout={e => setHeaderHeight(e.nativeEvent.layout.height)}>
      <FilterOptionButtons/>
    </View>
  }
  stickyHeaderIndices={[0]}
  keyExtractor={(item) => item.id}
  renderItem={renderItems}
  contentContainerStyle={{
    ...styles.flatListContainer,
    paddingTop: headerHeight
  }}
/>

如果FilterOptionButtons本身支持接收onLayout属性，也可以直接把事件绑在组件上，不需要额外套View。

内容的提问来源于stack exchange，提问作者zosozo