将标题添加到 FlatList答案

【问题标题】：Adding headers to FlatList将标题添加到 FlatList
【发布时间】：2019-02-28 04:03:39
【问题描述】：

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

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

-----[Upcoming]------------- 这里的置顶部分

除夕夜
复活节星期一
复活节星期四
NASCAR 比赛日

[今天]

圣诞节
迈克生日

[本周]

乔希生日
地球日
420 天

[上周]

母亲节等等

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

【问题讨论】：

检查SectionList

标签： javascript reactjs react-native react-native-flatlist

【解决方案1】：

使用 Section List 而不是 Flatlist

  <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

【讨论】：