ReactNative FlatList отображает все элементы одновременно?

Я использую новый компонент списка ReactNative - FlatList.

Кажется, что FlatList отображает все элементы сразу, даже если ячейка на самом деле не видна на экране.

<FlatList data={this.props.items} 
          keyExtractor={(item, index) => generateKey()}
         renderItem={this.renderStrip}/>

 renderItem = ({item}) => { 
   console.warn('rendered!');
   return <View style={{height:200, height: 100}} />
}

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

Я думал, что FlatList похож на способ RecycleView в Android, рендерит элемент только тогда, когда он будет видимым на экране.

Я что-то упускаю? Не снизит ли производительность?
Я хотел, чтобы он мог отображать элемент только тогда, когда он должен был отображаться.

Ответы

Ответ 1

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

⇓⇓⇓

TDLR; Убедитесь, что вы не вкладываете свой FlatList в ScrollList (или другие виды списков).

⇑⇑⇑

Подробное описание:

ВОПРОС

Так же как и в Thread-Opener, сначала мой Flatlist отображает только количество визуализаций, определенных в initialNumToRender, но сразу после этого приложение начинает отображать весь остальной список.

Enviroment

Я использую native-base.io в качестве UI-библиотеки и инкапсулировал содержимое экрана с помощью компонента

Решение

Я понял, что компонент родной базы <Content> заменяет ScrollList. FlatList внутри ScrollList направит вас к странным результатам. Когда я заменил -Component для данного экрана на <View>, все работает так, как ожидалось.

Ответ 2

это то же самое. В документации вы можете найти следующее:

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

Таким образом, он не отображает все элементы одновременно.

и вообще:

Это PureComponent, что означает, что он не будет повторно отображаться, если реквизит останется shallow- равным. Убедитесь, что все, на что зависит ваша функция renderItem, передается как поддержка (например, extraData), которая не является === после обновлений, в противном случае ваш пользовательский интерфейс может не обновляться при изменениях. Это включает в себя данные и состояние родительского компонента.

Дайте мне знать, если вам нужна дополнительная информация.

Ответ 3

FlatList делает слишком много предметов заранее, чтобы получить лучшую скорость заполнения. У нас схожие проблемы. Мы создаем RecyclerListView для решения таких проблем. Очень похоже на RecyclerView, но это только JS. Это быстрее, чем FlatList и битва, проверенная на Flipkart. Можешь попробовать.

Ссылка: https://github.com/Flipkart/ReactEssentials

Подробнее об этом можно прочитать здесь: https://medium.com/@naqvitalha/recyclerlistview-high-performance-listview-for-react-native-and-web-e368d6f0d7ef

Ответ 4

Если Flatlist вложен в ScrollView, он будет отображать все элементы одновременно.