将 headers 添加到 FlatList

Question

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

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

-----[即将上线]------------ 这里置顶

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

[今天]

圣诞节
迈克生日

[本周]

乔希的生日
地球日
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}
/>

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

将 headers 添加到 FlatList

Adding headers to FlatList

javascript

reactjs

react-native

react-native-flatlist