reactjs 向FlatList添加标题

fwzugrvs 于 2023-06-22 发布在 React

关注(0)|答案(1)|浏览(95)

我有一些这样的数据：data = [ {name: 'Christmans', date: '.....'}, {name: 'Easter', date: '.....'}, {name: 'Kwanza', date: '.....'} ...
我想用这样的粘性标题显示数据：
-----[即将推出]-----------此处为粘性部分

除夕夜
复活节星期一
复活节星期四
纳斯卡赛车日

[今天]

圣诞节
Mikes生日

[This星期]

Joshes生日
地球日
420天

[Last星期]

母亲节等

在react-native中使用FlatList。我怎样才能将数据按此顺序格式化？我是否需要创建4个不同的平面列表，并在第一个中传递即将到来的数据，在第二个中传递今天的数据等等？很高兴看到一个例子。谢谢你！

reactjs

来源：https://stackoverflow.com/questions/54918232/adding-headers-to-flatlist

1条答案

按热度按时间

qco9c6ql1#

使用截面列表而不是平面列表

<SectionList
    renderItem={({ item, index, section }) => (
      <Text key={index}>.{item}</Text>
    )}
    renderSectionHeader={({ section: { title } }) => (
      <Text style={{ fontWeight: "bold" }}>{title}</Text>
    )}
    sections={[
      { title: "Title1", data: ["item1", "item2"] },
      { title: "Title2", data: ["item3", "item4"] },
      { title: "Title3", data: ["item5", "item6"] },
    ]}
    keyExtractor={(item, index) => item + index}
  />

有关更多详细信息，请查看此链接-https://facebook.github.io/react-native/docs/sectionlist

赞(0）回复(0）举报 2023-06-22

我来回答

reactjs 向FlatList添加标题

1条答案

相关问题

热门标签

最新问答