React-native-snap-carousel: Заменить FlatList другим компонентом?

Два основных недостатка:

• Первый расширяет ScrollView .
• Второй - собственный плагин, но он не реализует недостающие функции FlatList , которые значительно улучшили бы карусель (продолжительность прокрутки, обратный вызов прокрутки ...).

Честно говоря, я нахожу FlatList непригодным для использования. Мой обходной путь для react-native-snap-carousel (который мне очень нравится, кстати) - установить initialNumToRender на data.length . Это единственный способ получить версию без ошибок.
Это отрывок из моего сценария после установки:

# Stupid bug in flat list.
# <strong i="11">@see</strong> comment in ListCarousel.tsx
sed -i.bak -e "s/initialNumToRender={initialNumToRender}/initialNumToRender={data.length}/" node_modules/react-native-snap-carousel/src/carousel/Carousel.js

Было бы неплохо, если бы react-native-snap-carousel поддерживал функцию, которая позволяла бы мне устанавливать initialNumToRender извне, чтобы мне больше не приходилось исправлять Carousel.js .
Я бы также сказал, что Carousel.js может захотеть установить initialNumToRender равным data.length по умолчанию, если ожидаемое количество элементов меньше 100 (вероятно, 90% всех случаев использования).

Из двух библиотек, которые вы нашли выше, я считаю react-native-largelist очень интригующим. Можно ли будет обойти недостающие функции или, возможно, убедить автора добавить их?

Привет @PublicParadise!

Что ж, initialNumToRender является частью переопределяемых свойств, поэтому вы сможете использовать <Carousel initialNumToRender={data.length} /> без какой-либо необходимости в патче ;-) Я могу гарантировать, что он работает, так как я пробовал его в № 235.

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

Что касается двух плагинов, которые я рассматриваю, мне сначала нужно запустить много тестов. Это определенно поможет, если мы сможем убедить автора react-native-largelist реализовать недостающие, но необходимые функции!

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

Привет @ bd-arc,

спасибо за советы. Честно говоря, я так расстроился из-за FlatList что я установил хак и больше никогда не касался компонента. Тогда initialNumToRender нельзя было переопределить, а useScrollView кажется даже лучше.

Похоже, что FlatList имеет странную зависимость от Animated . Вероятно, именно здесь у большинства людей возникают проблемы. Всего 6 дней назад кто-то зарегистрировал новую ошибку по этому поводу.

Я сам тоже искал замену FlatList и провел небольшое исследование. Создание оконных списков и отображение того, что находится в поле зрения, не кажется сложной проблемой. Больше всего мне понравились решения RxJS / most.js.

Удалось ли вам реализовать одно из этих двух решений в качестве замены?

Нет, я только исследовал. Тогда я все еще надеялся, что они в конечном итоге исправят FlatList .
Позвольте мне поделиться несколькими ссылками из моего исследования:

• Наивная бесконечная прокрутка в реактивном программировании с использованием RxJS Observables
• Используйте RxJS с React
• Повторное использование строк для высокопроизводительных представлений списков React Native
• Эксперименты React Native ListView
• Прокрутите таблицу с помощью cycle.js
• Создайте бесконечный список прокрутки с помощью Bacon.js
• Грубый перевод infinite-bacon в rxjs

Но у меня такое чувство, что нативный плагин ( react-native-largelist ) - это правильный путь.

Спасибо, что поделились своим исследованием 👍

Если честно, у меня сейчас нет времени проверять все это. Если вам хочется окунуться в react-native-largelist , это будет огромной помощью. Если нет, давайте обязательно будем держать друг друга в курсе ;-)

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

• Возвращение к производительности React Native ListView - переработка без моста
• BindingListView - экспериментальная реализация React Native ListView с поддержкой прямой привязки просмотра

@ bd-arc То же самое, у меня довольно требовательная дневная работа, а мое время и ресурсы ограничены.
Я могу посмотреть на BindingListView . Но да: давайте держать друг друга в курсе :)

Да, Тал Кол написал несколько высококачественных статей о React Native и оптимизации производительности.

Кроме того, меня особенно заинтересовал плагин Wix react-native-interactable , но, к сожалению, в последнее время у них не было времени решить некоторые досадные проблемы.

@ bd-arc В чем проблема с расширением ScrollView recyclerlistview ScrollView ? И large-list и FlatList построены на одном и том же.
Я написал recyclerlistview, и недавно моя команда использовала этот компонент карусели. Мы заменили FlatList на recyclerlistview, и он отлично работает.

Привет, @naqvitalha , спасибо, что

Исходя из моего опыта и до сих пор, все, что построено на ScrollView конечном итоге показывает ограничения производительности, когда существует огромное количество элементов, которые нужно обрабатывать, и / или ограничения функций. Но будьте уверены, моя цель - доказать, что я ошибаюсь ;-)

Хотели бы вы представить PR для этой эволюции, чтобы ее можно было всесторонне и тщательно протестировать?

@ bd-arc Конечно. Позвольте мне это сделать.

@naqvitalha @ bd-arc Любые обновления статуса с PR о замене flatlist на recyclerlistview ? Я хотел бы использовать это

Не связано с ScrollView FlatList и recyclerlistview , но кто-нибудь изучал, как response-native-gesture-handler может улучшить эту библиотеку?

Из документов:

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

Для этого требуется react-native link , что плохо с точки зрения сохранения этой зависимости lib. Но теперь он включен в Expo / CRNA.

Привет @ pcooney10 ,

Ранее я рассматривал возможность реализации пользовательского PanResponder поверх ScrollView / FlatList one (как вы можете видеть в # 40).

Вы пробовали что-то подобное с react-native-gesture-handler ? Я бы хотел получить обратную связь, чтобы определить, является ли это законной идеей или прямым путем к безумию ...

@amitassaraf Контракты этого компонента очень похожи на FlatList, так как свойства передаются вниз. Для RLV верстка обязательна. Это будет серьезное изменение, или нам нужно будет ввести новый режим.

Всем привет, хочу поделиться своим опытом использования этого компонента. Мне нужно было использовать его в ScrollView что создало проблему, что все элементы будут отображаться больше, чем вы указали бы в свойстве removeClippedSubviews элементы не удаляются из памяти, в противном случае каждый путь созданы новые элементы, из-за которых приложение истощает оперативную память Android. Чтобы получить правильную работу списка в ScrollView ( или другом списке ), используйте следующие свойства FlatList .

maxToRenderPerBatch={4}

initialNumToRender={4}

windowSize={4}

removeClippedSubviews={Platform.OS != 'ios'}

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

@ machester4 Спасибо, что поделились своими выводами! Эти значения не подходят для каждого варианта использования, но подход разумный ;-)

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

@naqvitalha Не могли бы вы рассказать, как вы заменили FlatList на RecylerView внутри карусели? Кроме того, вы поддерживаете что-то вроде https://github.com/facebook/react-native/issues/20500 в RecyclerView?

@ bd-arc Внимание, я почти уверен, что это повлияет на react-native-snap-carousel клиентов:
https://github.com/facebook/react-native/issues/21070

Спасибо за внимание @PublicParadise!

FlatList никогда не перестает удивлять ... Похоже, что InteractionManager может где-то работать, тем самым откладывая выполнение логики компонента.

Определенно пора избавиться от FlatList навсегда :-)

Привет, есть ли на данный момент обновления в этой области?

На самом деле FlatList на мой взгляд, имеет все необходимое, чтобы стать действительно отличным компонентом списка.
Все, что ему не хватает, - это концепция «предполагаемой высоты строки», которая есть у UITableView на iOS.
Таким образом, вам НЕ НУЖНО свойство для «сколько строк следует разместить асинхронно, чтобы выполнить некоторые взломы и уловки».

Все, что нам нужно, это, как я уже сказал, estimatedRowHeight (возможно, с обратным вызовом, чтобы позволить разные оценки для каждой строки, но все же оценки!).

• Это будет использоваться для расчета размера содержимого прокрутки.
• Прокрутка до смещения будет прокручиваться прямо к нему.
• Всякий раз, когда вы визуализируете строки - кешируйте их размеры после того, как они выложены.
• Используйте кэшированные размеры + предполагаемую высоту строк, чтобы быстро вычислить смещение элемента или элемента для смещения.
• Мы также не можем рассматривать оценки / кеши для всех строк до очень высокого индекса элемента, просто используйте какой-то размер окна и среднюю оценку для остальных.

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

Привет @naqvitalha! У вас есть какой-нибудь филиал или PR по переносу flatlist в RLV для этого компонента? Мне это будет очень полезно. Благодарю.

Спасибо, что попробовали мой компонент.

Практически для всех сцен вы должны сделать это так:

<Carousel  containerCustomStyle={{flex:1}} contentContainerCustomStyle={{flex:1}} renderItem={()=><LargeList ...props/>}/>

И убедитесь, что все родительские элементы Carousel содержат стиль { flex: 1 }.

Обратите внимание на этот совет:

LargeList default has a {flex:1} style，please be sure its parent has a bounded height.

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

Простите меня за мой бильярдный английский, если вы понимаете китайский. Проверьте эту проблему

Компонент FlatList слишком глючит, точка.

Эти плагины могут стать интересной заменой:

* https://github.com/Flipkart/recyclerlistview

* https://github.com/bolan9999/react-native-largelist

хорошо сказано