你如何使 React Native FlatList 的 ListHeaderComponent 具有粘性?

IT技术 reactjs react-native
2021-05-14 11:32:54

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

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

ListHeaderComponent props基本上是一个 x 轴标签,我想表现为“冻结标题”;就像在电子表格中一样。

如何使 ListHeaderComponent 具有粘性?

2个回答

您需要将props设置FlatliststickyHeaderIndices={[0]}

ListHeaderComponent:此props将在FlatList.

stickyHeaderIndices={[0]}:这个props会将FlatList0 索引位置项设置为粘性标题,正如您所看到的,我们已经添加了标题,FlatList因此标题现在位于 0 索引位置,因此默认情况下它将制作标题作为粘性。

<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]}
/>

stickyHeaderIndices={[0]} 会解决你的问题。

 <FlatList
        data={this.state.data}
        renderItem={this.renderItem}
        keyExtractor={item => item.id}
        stickyHeaderIndices={[0]}
      />

此外,stickyHeaderIndices也可以是我们想要粘贴的索引数组。你甚至可以像这样设置很多索引: FlatList Sticky Header Example

 <FlatList
        data={this.state.data}
        renderItem={this.renderItem}
        keyExtractor={item => item.name}
        stickyHeaderIndices={[0, 6, 13]}
      />

当你一直滚动 FlatList 时,item0 会被粘住,然后被 item6、item13 替换。

stickyHeaderIndices在 RN FlatList 文档中找不到但是你可以在源代码中找到它。VirtualizedList支持它。

VirtualizedList.js#L964