Виртуализированный список

Базовая реализация для более удобных компонентов <FlatList> и <SectionList>, которые также лучше документированы. В общем случае, это следует использовать только в том случае, если вам нужна большая гибкость, чем предоставляет FlatList, например, для использования с неизменяемыми данными вместо обычных массивов.

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

Некоторые замечания:

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

Справочник

Свойства

Свойства ScrollView

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

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

data

Функции-обработчики по умолчанию предполагают, что это массив объектов со структурой {key: string}, но вы можете переопределить getItem, getItemCount, и keyExtractor для обработки данных любого типа, основанных на индексах.

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

getItem

(data: any, index: number) => object;

Универсальный обработчик для извлечения элемента из любого типа данных.

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

getItemCount

(data: any) => number;

Определяет количество элементов в данных.

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

renderItem

(info: any) => ?React.Element<any>

Принимает элемент из data и рендерит его в список.

CellRendererComponent

Каждый элемент отображается с помощью этого элемента. Может быть классом компонента React или функцией рендеринга. По умолчанию используется View.

ItemSeparatorComponent

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

ListEmptyComponent

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

ListItemComponent

Каждый элемент данных отображается с помощью этого элемента. Может быть классом компонента React или функцией рендеринга.

ListFooterComponent

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

ListFooterComponentStyle

Стиль для внутреннего элемента View для ListFooterComponent.

ListHeaderComponent

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

ListHeaderComponentStyle

Стиль для внутреннего элемента View для ListHeaderComponent.

debug

debug включит дополнительное логирование и визуальные наложения для отладки использования и реализации, но с существенным снижением производительности.

disableVirtualization

Устарело. Виртуализация обеспечивает значительные улучшения производительности и памяти, но полностью отключает экземпляры React, которые находятся за пределами окна рендеринга. Вам следует отключить это только для отладки.

extraData

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

getItemLayout

(
    data: any,
    index: number,
  ) => {length: number, offset: number, index: number}

horizontal

Если true, рендерит элементы рядом друг с другом по горизонтали вместо вертикального расположения.

initialNumToRender

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

initialScrollIndex

Вместо запуска с верхней части с первым элементом, начните с initialScrollIndex. Это отключает оптимизацию «прокрутка до начала», которая сохраняет первые initialNumToRender элементы всегда рендерными и сразу рендерит элементы, начиная с этого начального индекса. Требует реализации getItemLayout.

inverted

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

listKey

Уникальный идентификатор для этого списка. Если имеется несколько VirtualizedLists на одном уровне вложенности внутри другого VirtualizedList, этот ключ необходим для правильной работы виртуализации.

keyExtractor

(item: object, index: number) => string;

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

maxToRenderPerBatch

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

onEndReached

(info: {distanceFromEnd: number}) => void

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

onEndReachedThreshold

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

onRefresh

() => void

Если предоставлено, будет добавлен стандартный RefreshControl для функциональности «перезагрузка при прокрутке вниз». Убедитесь, что также правильно задано свойство refreshing.

onScrollToIndexFailed

(info: {
    index: number,
    highestMeasuredFrameIndex: number,
    averageItemLength: number,
  }) => void

Используется для обработки ошибок при прокрутке к индексу, который ещё не был измерен. Рекомендуемое действие — вычислить собственный смещение и scrollTo его или прокрутить до максимальной возможной позиции, а затем повторить попытку после рендеринга дополнительных элементов.

onViewableItemsChanged

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

persistentScrollbar

progressViewOffset

Установите это значение, когда смещение необходимо для правильного отображения индикатора загрузки.

refreshControl

Элемент пользовательского управления обновлением. При установке он переопределяет компонент <RefreshControl> по умолчанию, встроенный внутри. Свойства onRefresh и refreshing также игнорируются. Работает только для вертикального VirtualizedList.

refreshing

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

removeClippedSubviews

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

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

renderScrollComponent

(props: object) => element;

Отобразить пользовательский компонент прокрутки, например, с другим стилем RefreshControl.

viewabilityConfig

См. ViewabilityHelper.js для типа потока и дополнительной документации.

viewabilityConfigCallbackPairs

Список пар ViewabilityConfig/onViewableItemsChanged. Конкретная функция onViewableItemsChanged будет вызвана, когда будут выполнены условия соответствующего ViewabilityConfig. См. ViewabilityHelper.js для типа потока и дополнительной документации.

updateCellsBatchingPeriod

Время между партиями рендеринга элементов с низким приоритетом, например, для рендеринга элементов, которые находятся далеко за пределами экрана. Аналогичный компромисс между скоростью заполнения/откликом и maxToRenderPerBatch.

windowSize

Определяет максимальное количество элементов, отображаемых за пределами видимой области в единицах видимой длины. Итак, если ваш список заполняет весь экран, то windowSize={21} (значение по умолчанию) отобразит видимую область экрана плюс до 10 экранов над и 10 под визуальным окном. Уменьшение этого числа уменьшит потребление памяти и может улучшить производительность, но увеличит вероятность того, что при быстром прокручивании могут появиться кратковременные пустые области неотрендеренного содержимого.

Методы

flashScrollIndicators()

flashScrollIndicators();

getChildContext()

getChildContext () => Object;

Возвращаемый Object состоит из:

• 'virtualizedList' (Объект). Этот объект состоит из следующего
  • getScrollMetrics' (Функция). Возвращает объект со следующими свойствами: { contentLength: number, dOffset: number, dt: number, offset: number, timestamp: number, velocity: number, visibleLength: number }.
  • 'horizontal' (boolean) — необязательно.
  • 'getOutermostParentListRef' (Функция).
  • 'getNestedChildState' (Функция) — Возвращает ChildListState.
  • 'registerAsNestedChild' (Функция). Принимает объект со следующими свойствами { cellKey: string, key: string, ref: VirtualizedList, parentDebugInfo: ListDebugInfo }. Возвращает ChildListState.
  • 'unregisterAsNestedChild' (Функция). Принимает объект со следующими свойствами { key: string, state: ChildListState }
  • 'debugInfo' (ListDebugInfo).

getScrollableNode()

getScrollableNode () => ?number;

getScrollRef()

getScrollRef () => | ?React.ElementRef<typeof ScrollView>
    | ?React.ElementRef<typeof View>;

getScrollResponder()

getScrollResponder () => ?ScrollResponderType;

Предоставляет доступ к основному объекту прокрутки. Обратите внимание, что this._scrollRef может не быть ScrollView, поэтому необходимо проверить, что он реагирует на getScrollResponder перед вызовом.

hasMore()

hasMore () => boolean;

scrollToEnd()

scrollToEnd(([options]: { animated: boolean }));

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

Параметры:

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

• 'animated' (boolean) — выполняется ли анимация при прокрутке. По умолчанию true.

scrollToIndex()

scrollToIndex((params: object));

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

• 'animated' (boolean). Необязательно.
• 'index' (число). Обязательно.
• 'viewOffset' (число). Необязательно.
• 'viewPosition' (число). Необязательно.

scrollToItem()

scrollToItem((params: object));

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

• 'animated' (boolean). Необязательно.
• 'item' (Элемент). Обязательно.
• 'viewPosition' (число). Необязательно.

scrollToOffset()

scrollToOffset((params: object));

Прокрутка до определённого пиксельного смещения содержимого в списке.

Параметр offset ожидает смещение для прокрутки. В случае, если horizontal равно true, смещение — значение x; в противном случае — значение y.

Параметр animated (по умолчанию true) определяет, должна ли прокрутка сопровождаться анимацией.

recordInteraction()

recordInteraction();

setNativeProps()

setNativeProps((props: Object));