向 FlatList 添加标题

Question

我有一些这样的数据： data = [ {name: 'Christmans', date: '.....'}, {name: 'Easter', date: '.....'}, {name: 'Kwanza', date: '.....'} ...

我想用这样的粘性标题显示数据：

-----[即将推出]------------- 此处置顶部分

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

[今天]

• 圣诞节
• 迈克的生日

[本星期]

• 乔希生日
• 地球日
• 第420天

[上星期]

• 母亲节等

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

Answer 1

使用部分列表而不是平面列表

 <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