SectionList¶

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

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

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

Пример¶

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

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

пропсы¶

VirtualizedList Props¶

Наследует VirtualizedList Props.

renderItem (обязательный)¶

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

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

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

sections (обязательно)¶

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

extraData¶

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

initialNumToRender¶

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

inverted¶

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

ItemSeparatorComponent¶

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

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 для функциональности "Pull to Refresh". Убедитесь, что вы также правильно установили параметр refreshing. Чтобы сместить RefreshControl от вершины (например, на 100 пт), используйте progressViewOffset={100}.

onViewableItemsChanged¶

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

refreshing¶

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

removeClippedSubviews¶

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

renderSectionFooter¶

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

renderSectionHeader¶

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

SectionSeparatorComponent¶

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

stickySectionHeadersEnabled¶

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

Методы¶

flashScrollIndicators() ¶

1

flashScrollIndicators();

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

recordInteraction()¶

1

recordInteraction();

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

scrollToLocation()¶

1

scrollToLocation(params: SectionListScrollParams);

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

Параметры:

Допустимыми ключами params являются:

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

Определения типа¶

Section¶

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

Свойства:

Комментарии