你如何让 React Native FlatList 的 ListHeaderComponent 变得有粘性？

Question

I have a FlatList that is purposefully wider then the screen width.

The list scrolls vertically to view each row and sits in a horizontal ScrollView to access off-screen items.

The ListHeaderComponent prop is basically an x-axis label I'd like to behave as a "frozen header"; like in a spreadsheet.

How do I make the ListHeaderComponent sticky?

Answer 1

You need to set prop to Flatlist as stickyHeaderIndices={[0]}

ListHeaderComponent : This prop would set the header view at the top of FlatList .

stickyHeaderIndices={[0]} : This prop would set the FlatList 0 index position item as sticky header and as you can see we have already added the header to FlatList so the header is now on 0 index position, so it will by default make the header as sticky.

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

Answer 2

stickyHeaderIndices={[0]} would solve your problem.

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

Besides, stickyHeaderIndices can also be an array of the indices we want to stick. You can even set a lot of indices like this: FlatList Sticky Header Example

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

When you keep scrolling the FlatList, item0 will be sticky, and then be replaced by item6, item13.

_{(source: nativebase.io )}

You can't find stickyHeaderIndices in the RN FlatList documentation. But you can find it in the source code. VirtualizedList supports it.

VirtualizedList.js#L964