reactjs – 如何使React Native FlatList的ListHeaderComponent

发布时间：2020-12-15 20:50:10 所属栏目：百科来源：网络整理

导读：我有一个FlatList,它有目的地比屏幕宽度宽. 该列表垂直滚动以查看每一行,并位于水平ScrollView中以访问屏幕外项目. ListHeaderComponent prop基本上是一个x轴标签,我想表现为“冻结标题”;就像在电子表格中一样. 如何使ListHeaderComponent变粘？您需要将pr

我有一个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]}
/>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!