reactjs – 如何使React Native FlatList的ListHeaderComponent变粘?

前端之家收集整理的这篇文章主要介绍了reactjs – 如何使React Native FlatList的ListHeaderComponent变粘?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个FlatList,它有目的地比屏幕宽度宽.

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

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

如何使ListHeaderComponent变粘?

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

ListHeaderComponent:此prop将标题视图设置在FlatList的顶部.

stickyHeaderIndices = {[0]}:这个prop会将FlatList 0索引位置项设置为粘性标题,你可以看到我们已经将标题添加到FlatList中,所以标题现在位于0索引位置,所以它默认为make标题为粘性.

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

猜你在找的React相关文章