Добавление заголовков в FlatList

Question

У меня есть некоторые данные, как это: data = [ {name: 'Christmans', date: '.....'}, {name: 'Easter', date: '.....'}, {name: 'Kwanza', date: '.....'} ...

Я хотел отобразить данные с липким заголовком, как это:

----- [Предстоящие]------------- Липкий раздел здесь

• Канун Нового года
• Пасхальный понедельник
• Пасхальный четверг
• NASCAR Raceday

[СЕГОДНЯ]

• рождество
• Майки день рождения

[На этой неделе]

• День рождения Джоша
• День Земли
• 420 день

[Прошлая неделя]

• День матери и т. Д.

Это использует FlatList в реагировать родной. Как я могу получить данные, отформатированные в таком порядке? нужно ли мне создать 4 разных плоских списка и передать предстоящие данные в первом, сегодня данные во втором и т. д.? Было бы приятно увидеть пример. Спасибо!

Answer 1

Используйте список разделов вместо 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