Как визуализировать большой динамический список с помощью response-native

Question

У меня есть CMS-страница, которая может содержать полы товаров или изображений. Изображения могут не иметь определенного соотношения или размера. И компонент продукта должен поддерживать добавление в корзину.

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

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

Есть ли какие-либо предложения по созданию такой страницы CMS с RN?

Answer 1

@ Ответ Шахена Ованнисяна - хорошее предположение. Но учитывая react-native-largelist имеет более низкий показатель и звезды. Я не импортировал его в наш проект.

Мое решение по-прежнему заключается в использовании реактивного натива FlatList. И оборачивать элементы с помощью React.memo или с использованием PureComponent вместо Component, чтобы избежать ненужной визуализации. Я также дал определенный макет для изображений. По моему опыту, это увеличит опыт рендеринга FlatList. Замена Image на react-native-fast-image также является эффективным улучшением. Это приведет к меньшему использованию памяти и лучшему кешу. Кстати, для react-native 0,59 используйте react-native-fast-image 6.1.1, только для последней версии поддерживается RN 0,60 +.

Answer 2

FlatList сам по себе является медленным компонентом. Он имеет огромный выигрыш с точки зрения памяти, но работает медленно.

Попробуйте использовать пакет https://github.com/bolan9999/react-native-largelist для больших списков. Мне кажется, это работает лучше.