我有一个故意比屏幕宽度更宽的 FlatList。
该列表垂直滚动以查看每一行,并位于水平 ScrollView 中以访问屏幕外项目。
ListHeaderComponent props基本上是一个 x 轴标签,我想表现为“冻结标题”;就像在电子表格中一样。
如何使 ListHeaderComponent 具有粘性?
我有一个故意比屏幕宽度更宽的 FlatList。
该列表垂直滚动以查看每一行,并位于水平 ScrollView 中以访问屏幕外项目。
ListHeaderComponent props基本上是一个 x 轴标签,我想表现为“冻结标题”;就像在电子表格中一样。
如何使 ListHeaderComponent 具有粘性?
您需要将props设置Flatlist
为stickyHeaderIndices={[0]}
ListHeaderComponent:此props将在FlatList
.
stickyHeaderIndices={[0]}:这个props会将FlatList
0 索引位置项设置为粘性标题,正如您所看到的,我们已经添加了标题,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
支持它。