СписокРазделов

Высокопроизводительный интерфейс для отображения разделенных списков, поддерживающий самые удобные функции:

• Полностью кроссплатформенный.
• Настраиваемые колбэки видимости.
• Поддержка заголовков списка.
• Поддержка подвалов списка.
• Поддержка разделителей элементов.
• Поддержка заголовков разделов.
• Поддержка разделителей разделов.
• Поддержка разнородных данных и элементов отображения.
• Перетаскивание для обновления.
• Загрузка при прокрутке.

Если вам не нужна поддержка разделов и вы хотите более простой интерфейс, используйте <FlatList>.

• Компонент функции
• Компонент класса

Это удобная обертка вокруг <VirtualizedList>, и поэтому она наследует её свойства (а также свойства <ScrollView>), которые не указаны здесь явно, а также следующие замечания:

• Внутреннее состояние не сохраняется, когда содержимое прокручивается за пределы окна рендеринга. Убедитесь, что все ваши данные захватываются в данных элементов или внешних хранилищах, таких как Flux, Redux или Relay.
• Это PureComponent, что означает, что он не будет перерисовываться, если props остаются одинаковыми. Убедитесь, что всё, от чего зависит ваша функция renderItem, передаётся как свойство (например, extraData), которое не === после обновлений, иначе ваш интерфейс может не обновиться при изменениях. Это включает в себя свойство data и состояние родительского компонента.
• Для ограничения памяти и обеспечения плавной прокрутки содержимое рендерится асинхронно вне экрана. Это означает, что можно прокручивать быстрее, чем скорость заполнения, и на мгновение увидеть пустое содержимое. Это компромисс, который можно настроить в соответствии с потребностями каждого приложения, и мы работаем над его улучшением за кулисами.
• По умолчанию список ищет свойство key в каждом элементе и использует его в качестве ключа React. Также вы можете предоставить свойство keyExtractor.

Справочник

Свойства

Свойства VirtualizedList

Наследует Свойства VirtualizedList.

Обязательное

renderItem

По умолчанию рендерер для каждого элемента в каждом разделе. Может быть переопределён для каждого раздела. Должен возвращать React-элемент.

Функции рендера будет передан объект со следующими ключами:

• 'item' (объект) - объект элемента, как указано в ключе data этого раздела
• 'index' (число) - индекс элемента в разделе.
• 'section' (объект) - полный объект раздела, как указано в sections.
• 'separators' (объект) - объект со следующими ключами:
  • 'highlight' (функция) - () => void
  • 'unhighlight' (функция) - () => void
  • 'updateProps' (функция) - (select, newProps) => void
    • 'select' (перечисление) - возможные значения: 'leading', 'trailing'
    • 'newProps' (объект)

Обязательное

sections

Фактические данные для отображения, подобно свойству data в FlatList.

extraData

Свойство-маркер для указания списку перерендеринга (поскольку он реализует PureComponent). Если какие-либо ваши функции renderItem, Заголовок, Подвал и т. д. зависят от чего-либо вне свойства data, поместите это сюда и обрабатывайте неизменяемым.

initialNumToRender

Количество элементов, которые нужно отобразить в начальной группе. Этого должно быть достаточно для заполнения экрана, но не намного больше. Обратите внимание, что эти элементы никогда не будут удалены в рамках оконного рендеринга для повышения производительности при действиях прокрутки до верха.

inverted

Инвертирует направление прокрутки. Использует преобразования масштаба -1.

ItemSeparatorComponent

Отображается между каждым элементом, но не вверху и внизу. По умолчанию предоставляются свойства highlighted, section, и [leading/trailing][Item/Section]. renderItem предоставляет separators.highlight/unhighlight, которые обновят свойство highlighted, но вы также можете добавить пользовательские свойства с помощью separators.updateProps.

keyExtractor

Используется для извлечения уникального ключа для заданного элемента в указанном индексе. Ключ используется для кэширования и как ключ React для отслеживания переупорядочивания элементов. По умолчанию извлечение проверяет item.key, а затем использует индекс как резервный вариант, как и React. Обратите внимание, что это устанавливает ключи для каждого элемента, но каждый раздел в целом всё ещё нуждается в своём собственном ключе.

ListEmptyComponent

Отображается, когда список пуст. Может быть компонентом React (например, SomeComponent или React-элементом (например, <SomeComponent />).

ListFooterComponent

Отображается в самом конце списка. Может быть компонентом React (например, SomeComponent или React-элементом (например, <SomeComponent />).

ListHeaderComponent

Отображается в самом начале списка. Может быть компонентом React (например, SomeComponent или React-элементом (например, <SomeComponent />).

onEndReached

Вызывается один раз, когда положение прокрутки находится в пределах onEndReachedThreshold от отображаемого содержимого.

onEndReachedThreshold

Насколько далеко от конца (в единицах видимой длины списка) нижний край списка должен быть от конца содержимого для активации колбэка onEndReached. Таким образом, значение 0,5 активирует onEndReached когда конец содержимого находится в пределах половины видимой длины списка.

onRefresh

Если указано, будет добавлен стандартный RefreshControl для функциональности "Перетащить для обновления". Убедитесь, что также правильно задано свойство refreshing. Для смещения RefreshControl от верха (например, на 100 точек), используйте progressViewOffset={100}.

onViewableItemsChanged

Вызывается при изменении видимости строк, как определено свойством viewabilityConfig.

refreshing

Установите это значение в true, ожидая новых данных с обновления.

removeClippedSubviews

Примечание: может содержать ошибки (отсутствующее содержимое) в некоторых случаях - используйте на свой страх и риск.

Это может улучшить производительность прокрутки для больших списков.

renderSectionFooter

Отображается внизу каждого раздела.

renderSectionHeader

Отображается вверху каждого раздела. Они прикрепляются к верхней части ScrollView по умолчанию в iOS. См. stickySectionHeadersEnabled.

SectionSeparatorComponent

Отображается вверху и внизу каждого раздела (обратите внимание, что это отличается от ItemSeparatorComponent, который отображается только между элементами). Они предназначены для разделения разделов от заголовков выше и ниже и обычно имеют тот же ответ при выделении, что и ItemSeparatorComponent. Также получает highlighted, [leading/trailing][Item/Section], и любые пользовательские свойства из separators.updateProps.

stickySectionHeadersEnabled

Прикрепляет заголовки разделов к верху экрана до тех пор, пока следующий заголовок не отцепит его. По умолчанию включено только в iOS, так как это стандартной платформы.

Методы

flashScrollIndicators()

iOS

flashScrollIndicators();

Временно отображает индикаторы прокрутки.

recordInteraction()

recordInteraction();

Сообщает списку о том, что произошло взаимодействие, что должно активировать вычисления видимости, например, если waitForInteractions истинно, а пользователь не прокручивал. Обычно это вызывается при нажатии на элементы или действиях навигации.

scrollToLocation()

scrollToLocation(params);

Прокручивает элемент в указанном sectionIndex и itemIndex (внутри раздела) в области видимости так, что viewPosition 0 помещает его в верхнюю часть (и он может быть скрыт закреплённым заголовком), 1 — в нижнюю, а 0,5 — по центру.

Примечание: невозможно прокрутить к позициям за пределами области рендеринга без указания getItemLayout или onScrollToIndexFailed свойства.

Параметры:

Допустимые params ключи:

• 'animated' (булево) — Прокручиваться ли списку с анимацией. По умолчанию true.
• 'itemIndex' (число) — Индекс элемента в разделе, к которому нужно прокрутить. Обязательно.
• 'sectionIndex' (число) — Индекс раздела, содержащего элемент, к которому нужно прокрутить. Обязательно.
• 'viewOffset' (число) — Фиксированное количество пикселей для смещения конечной позиции, например, для компенсации закреплённых заголовков.
• 'viewPosition' (число) — Значение 0 помещает элемент, определённый индексом, в верхнюю часть, 1 — в нижнюю, а 0.5 — по центру.

Определения типов

Раздел

Объект, определяющий данные, которые нужно отобразить для данного раздела.

Свойства: