Nach dem Upgrade auf React-Native 0.61 erhalte ich viele Warnungen wie diese:
VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.
Was ist das andere VirtualizedList-backed container
, das ich verwenden sollte, und warum wird es jetzt empfohlen, nicht so zu verwenden?
javascript
reactjs
react-native
David Schilling
quelle
quelle
Antworten:
Wenn noch jemand nach einem Vorschlag für das Problem sucht, das @Ponleu und @David Schilling hier beschrieben haben (in Bezug auf Inhalte, die über die FlatList hinausgehen), dann ist dies der Ansatz, den ich gewählt habe:
Weitere Informationen hierzu finden Sie hier: https://facebook.github.io/react-native/docs/flatlist#listheadercomponent
Hoffentlich hilft es jemandem. :) :)
quelle
ScrollView
undFlatList
- Sie erhalten ein inkonsistentes Bildlaufverhalten. Die in dieser Antwort dargestellte Methode führt zu nur einem Bildlaufcontainer, und in Kopf- / Fußzeile können Sie jede Ansicht einfügen, egal wie komplex sie ist.useMemo
von React bereitgestellten Hooks auswendig lernen , um ein erneutes Rendern zu vermeiden. Weitere Informationen hier: reactjs.org/docs/hooks-reference.html#usememo Lassen Sie mich, wenn es hilfreich ist. :)Nur für den Fall, dass dies jemandem hilft, habe ich den Fehler in meinem Fall auf diese Weise behoben.
Ich hatte ein
FlatList
verschachteltes in einemScrollView
:und ich wurde das los,
ScrollView
indem ich das benutzteFlatList
, um alles zu rendern, was ich brauchte, was die Warnung loswurde:quelle
Schauen Sie sich die Beispiele in Dokumenten an, von denen ich den Container geändert habe:
zu:
und all diese Warnungen verschwanden.
quelle
FlatList
Innenseiten rendereScrollView
und möchte, dass diese Inhalte scrollbar sind?ScrollView
Innenseite , dass einige Inhalte und dannFlatList
auch innerhalb derScrollView
. Und ich möchte, dass der gesamte Bildschirm zusammen rollt.Meiner Meinung nach kann ich anstelle von FlatList eine Karte verwenden. Aber in meinem Fall möchte ich keine große Liste anzeigen. Wenn Sie FlatList nicht verwenden, kann dies zu Leistungsproblemen führen. Daher habe ich dies verwendet, um die Warnung https://github.com/GeekyAnts/NativeBase/issues/2947#issuecomment-549210509 zu unterdrücken
quelle
Die Warnung wird angezeigt , da
ScrollView
undFlatList
die gleiche Logik teilen, wennFlatList
Lauf im InnernScrollView
, es dupliziert istÜbrigens
SafeAreaView
funktioniert das bei mir nicht, der einzige Weg zu lösen istDer Fehler verschwindet
quelle
Ich habe versucht, dies zu lösen, einschließlich
ListHeaderComponent
oderListFooterComponent
, aber alles passte nicht zu mir.Das Layout, das ich erreichen wollte, ist wie folgt, und ich wollte einmal gescrollt werden.
Zuerst möchte ich mich bei diesem Thema und den Kommentaren bedanken, die mir viele Ideen gegeben haben.
Ich dachte an
ListHeaderComponent
Orte über der Flatlist, aber da meineFlatlist
Richtung Spalte war, ging der Header, den ich platzieren wollte, links vonFlatlist
:(Dann musste ich etwas anprobieren
VirtualizedList-backed
. Ich habe gerade versucht, alle Komponenten einzupackenVirtualizedList
, worenderItems
gibt Index und dort konnte ich Komponenten bedingt übergebenrenderItems
.Ich hätte damit arbeiten können
Flatlist
, aber ich habe es noch nicht versucht.Endlich sieht es so aus.
und natürlich in der Lage, den gesamten Bildschirm zu scrollen.
quelle
Dieses Problem tritt auf, wenn Sie das
<FlatList />
Innere<ScrollView>
mit derselben Ausrichtung verwenden.Um dies zu beheben, fügen Sie Ihrer FlatList einfach "horizontal" hinzu:
NB: Ihre FlatList wird horizontal gerendert
quelle