如何使React Native FlatList的ListHeaderComponent变粘？

Question

我有一个FlatList，它有目的地比屏幕宽度宽。

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

ListHeaderComponent prop基本上是一个x轴标签，我喜欢表现为＆＃34;冻结标题＆＃34 ;;就像在电子表格中一样。

如何使ListHeaderComponent变粘？

Answer 1

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

ListHeaderComponent ：此道具会将标题视图设置在FlatList的顶部。

stickyHeaderIndices = {[0]} ：此道具会将FlatList 0索引位置项设置为粘贴标头，您可以看到我们已将标头添加到{{1所以标题现在位于0索引位置，因此它默认将标题设置为粘滞。

FlatList

Answer 2

enter code here对于您的问题，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代替。

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

VirtualizedList.js#L964