reactjs - 如何使 React Native FlatList 的 ListHeaderComponent 具有粘性？

Question

我有一个故意比屏幕宽度更宽的 FlatList。

列表垂直滚动以查看每一行，并位于水平 ScrollView 中以访问屏幕外的项目。

ListHeaderComponent 属性基本上是一个 x 轴标签，我想充当“卡住标题”；就像在电子表格中一样。

如何使 ListHeaderComponent 具有粘性？

Answer 1

您需要将 Flatlist 设置为 stickyHeaderIndices={[0]}

ListHeaderComponent:此 Prop 会将标题 View 设置在 FlatList 的顶部。

stickyHeaderIndices={[0]}:此属性会将 FlatList 0 索引位置项设置为粘性 header ，如您所见，我们已经将 header 添加到FlatList 因此 header 现在位于 0 索引位置，因此默认情况下会将 header 设为粘性。

<FlatList
  data={ this.state.FlatListItems }
  ItemSeparatorComponent={ this.FlatListItemSeparator}
  renderItem={ ({item}) => (
    <Text
      style={styles.FlatList_Item}
      onPress={this.GetItem.bind(this, item.key)}> {item.key}
      </Text>
  )}
  ListHeaderComponent={this.Render_FlatList_Sticky_header}
  stickyHeaderIndices={[0]}
/>