VirtualizedList¶

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

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

Пример¶

Некоторые предостережения:

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

пропсы¶

ScrollView Props¶

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

data¶

Непрозрачный тип данных, передаваемый в getItem и getItemCount для получения элементов.

getItem¶

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

1

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

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

getItemCount¶

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

1

(data: any) => number;

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

renderItem¶

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

1

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

Берет элемент из data и отображает его в списке

CellRendererComponent¶

CellRendererComponent позволяет настроить, как ячейки, отображаемые renderItem/ListItemComponent, будут обернуты при помещении в основной ScrollView. Этот компонент должен принимать обработчики событий, которые уведомляют VirtualizedList об изменениях в ячейке.

ItemSeparatorComponent¶

Рендерится между каждым элементом, но не сверху или снизу. По умолчанию предоставляются пропсы highlighted и leadingItem. renderItem предоставляет separators.highlight/unhighlight, которые обновляют пропс highlighted, но вы также можете добавить пользовательские пропсы с помощью separators.updateProps. Может быть компонентом React (например, SomeComponent) или элементом React (например, <SomeComponent />).

ListEmptyComponent¶

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

ListItemComponent¶

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

ListFooterComponent¶

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

ListFooterComponentStyle¶

Стилизация для внутреннего представления для ListFooterComponent.

ListHeaderComponent¶

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

ListHeaderComponentStyle¶

Стилизация для внутреннего представления для ListHeaderComponent.

debug¶

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

disableVirtualization¶

extraData¶

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

getItemLayout¶

1
2
3
4

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

horizontal¶

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

initialNumToRender¶

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

initialScrollIndex¶

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

inverted¶

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

listKey¶

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

keyExtractor¶

1

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

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

maxToRenderPerBatch¶

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

onEndReached¶

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

onEndReachedThreshold¶

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

onRefresh¶

1

() => void;

Если он указан, будет добавлен стандартный RefreshControl для функциональности "Pull to Refresh". Убедитесь, что вы также правильно установили параметр refreshing.

onScrollToIndexFailed¶

1
2
3
4
5

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

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

onStartReached¶

Вызывается один раз, когда позиция прокрутки оказывается в пределах onStartReachedThreshold от логического начала списка.

onStartReachedThreshold¶

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

onViewableItemsChanged¶

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

persistentScrollbar¶

progressViewOffset¶

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

refreshControl¶

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

refreshing¶

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

removeClippedSubviews¶

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

renderScrollComponent¶

1

(props: object) => element;

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

viewabilityConfig¶

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

viewabilityConfigCallbackPairs¶

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

updateCellsBatchingPeriod¶

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

windowSize¶

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

Методы¶

flashScrollIndicators()¶

1

flashScrollIndicators();

getScrollableNode()¶

1

getScrollableNode(): any;

getScrollRef()¶

1
2
3
4

getScrollRef():
  | React.ElementRef<typeof ScrollView>
  | React.ElementRef<typeof View>
  | null;

getScrollResponder()¶

1

getScrollResponder () => ScrollResponderMixin | null;

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

scrollToEnd()¶

1

scrollToEnd(params?: {animated?: boolean});

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

Параметры:

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

• 'animated' (boolean) - Должен ли список делать анимацию при прокрутке. По умолчанию true.

scrollToIndex()¶

1
2
3
4
5
6

scrollToIndex(params: {
  index: number;
  animated?: boolean;
  viewOffset?: number;
  viewPosition?: number;
});

Valid params consist of:

• 'index' (number). Required.
• 'animated' (boolean). Optional.
• 'viewOffset' (number). Optional.
• 'viewPosition' (number). Optional.

scrollToItem()¶

1
2
3
4
5
6

scrollToItem(params: {
  item: ItemT;
  animated?: boolean;
  viewOffset?: number;
  viewPosition?: number;
});

Допустимые params состоят из:

• 'item' (элемент). Требуется.
• 'animated' (булево). Необязательно.
• 'viewOffset' (число). Необязательно.
• 'viewPosition' (число). Необязательно.

scrollToOffset()¶

1
2
3
4

scrollToOffset(params: {
  offset: number;
  animated?: boolean;
});

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

Параметр offset указывает на смещение, до которого нужно прокрутить список. В случае, если horizontal равен true, смещением будет значение x, в любом другом случае смещением будет значение y.

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

Комментарии