reactjs 向FlatList添加标题

fwzugrvs  于 2023-06-22  发布在  React
关注(0)|答案(1)|浏览(93)

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

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

[今天]

  • 圣诞节
  • Mikes生日

[This星期]

  • Joshes生日
  • 地球日
  • 420天

[Last星期]

  • 母亲节等

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

qco9c6ql

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

相关问题