Добавление заголовков в FlatList - PullRequest
Новая
       6

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

0 голосов
/ 28 февраля 2019

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

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

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

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

[СЕГОДНЯ]

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

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

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

[Последняя неделя]

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

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

1 Ответ

0 голосов
/ 28 февраля 2019

Использовать список разделов вместо плоского списка 

  <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

...