После обновления до версии 0,61, я получил много предупреждений:
VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.
Что еще VirtualizedList-backed container
я должен использовать, и почему теперь не рекомендуется так использовать?
javascript
reactjs
react-native
Дэвид Шиллинг
источник
источник
Ответы:
Если кто-то все еще ищет предложение по проблеме, которую @Ponleu и @David Schilling описали здесь (относительно контента, который выходит за пределы FlatList), то я выбрал такой подход:
Вы можете прочитать больше об этом здесь: https://facebook.github.io/react-native/docs/flatlist#listheadercomponent
Надеюсь, это кому-нибудь поможет. :)
источник
ScrollView
иFlatList
- вы получите непоследовательное поведение прокрутки. Способ, представленный в этом ответе, приводит только к одному контейнеру прокрутки, а в верхнем / нижнем колонтитуле вы можете поместить любое представление, независимо от того, насколько оно сложное.useMemo
хук, предоставленный React, чтобы избежать повторного рендеринга. Более подробная информация здесь: reactjs.org/docs/hooks-reference.html#usememo Позвольте мне, если это будет полезно. :)На всякий случай, если это кому-то поможет, я исправил ошибку в моем случае.
У меня было
FlatList
вложенное внутриScrollView
:и я избавился от
ScrollView
с помощью,FlatList
чтобы сделать все, что мне нужно, что избавилось от предупреждения:источник
Глядя на примеры в документах, я изменил контейнер с:
чтобы:
и все эти предупреждения исчезли.
источник
FlatList
внутренней частиScrollView
и хочу, чтобы этот контент можно было прокручивать?ScrollView
внутри, а затемFlatList
и внутриScrollView
. И я хочу, чтобы весь экран прокручивался вместе.На мой взгляд, я могу использовать карту вместо FlatList. Но в моем случае я не хочу показывать большой список. Неиспользование FlatList может вызвать проблемы с производительностью. поэтому я использовал это для подавления предупреждения https://github.com/GeekyAnts/NativeBase/issues/2947#issuecomment-549210509
источник
Появляется предупреждение, потому что
ScrollView
иFlatList
используют ту же логику, еслиFlatList
запустить внутриScrollView
, оно дублируетсяКстати
SafeAreaView
, не работает для меня, единственный способ решитьОшибка исчезает
источник
Я попробовал несколько способов решить эту проблему, включая
ListHeaderComponent
илиListFooterComponent
, но все это мне не подходило.макет, который я хотел достичь, похож на это, и я хотел получить прокрутку в один раз.
Сначала я хочу сказать спасибо этой проблеме и комментариям, которые дали мне кучу идей.
Я думал о
ListHeaderComponent
местах выше Flatlist, но так как моеFlatlist
направление было столбцом, заголовок, который я хотел разместить, был слева отFlatlist
:(Тогда мне пришлось примерить
VirtualizedList-backed
вещь. Я просто попытался упаковать все компонентыVirtualizedList
, гдеrenderItems
дает индекс, и там я могу условно передать компонентыrenderItems
.Я мог бы работать с этим
Flatlist
, но я еще не пробовал.Наконец-то это выглядит так.
и, конечно, в состоянии прокрутить весь экран.
источник
Эта проблема возникает, когда вы используете
<FlatList />
внутри<ScrollView>
с той же ориентацией.Чтобы это исправить, просто добавьте «горизонтальный» в свой FlatList:
NB. Ваш FlatList будет отображаться горизонтально
источник