Почему мы используем getItemLayout в плоском списке, как это помогает улучшить производительность плоского списка. Проверьте документацию по реакции, но не нашли удовлетворительного ответа.
getItemLayout={(data, index) => (
{length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
)}
что здесь смещено, что оно делает?
React Native FlatList оптимизирует производительность представления списка, отображая только строки, которые в данный момент видны на экране, и размонтируя строки, которые были прокручены.
Чтобы FlatList мог это сделать, ему необходимо знать общую высоту строк над видимой в данный момент областью просмотра, чтобы он мог правильно установить базовую позицию прокрутки ScrollView.
FlatList может добиться этого двумя способами. Либо,
В первом случае ему необходимо полностью компоновать, визуализировать, монтировать и измерять предыдущие ряды, пока он не сможет вычислить положение следующих рядов.
В последнем случае он может заранее рассчитать позиции и избежать затрат на динамическое измерение.
Три аргумента обратного вызова getItemLayout:
length: Высота каждой отдельной строки. Они могут быть разной высоты, но высота должна быть статической. Оптимизация работает лучше всего, когда высота постоянна.offset: Расстояние (в пикселях) текущей строки от верхней части FlatList. Самый простой способ вычислить это для строк постоянной высоты — height * index, что дает позицию сразу после предыдущей строки.index: индекс текущей строки.Если FlatList является горизонтальным, каждый столбец списка обрабатывается как строка списка, а ширина столбца совпадает с высотой строки.
{ length: ItemHeight, offset: (ItemHeight + SeparatorHeight) * index, index}?
- person user2236165; 14.08.2018
