React-Native ein weiterer von VirtualizedList unterstützter Container

39

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?

David Schilling
quelle
3
Sie sollten wirklich etwas Code zeigen
Variag

Antworten:

27

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:

<SafeAreaView style={{flex: 1}}>
    <FlatList
      data={data}
      ListHeaderComponent={ContentThatGoesAboveTheFlatList}
      ListFooterComponent={ContentThatGoesBelowTheFlatList} />
</SafeAreaView>

Weitere Informationen hierzu finden Sie hier: https://facebook.github.io/react-native/docs/flatlist#listheadercomponent

Hoffentlich hilft es jemandem. :) :)

Afraz Hussain
quelle
1
Wissen Sie, warum dies besser sein sollte als die Art und Weise, wie die Warnung erstellt wird?
David Schilling
2
@DavidSchilling, weil die Art und Weise, wie Sie es versucht haben, mit 2 Bildlaufcontainern resultiert: ScrollViewund FlatList- 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.
Variag
Ich verwende die Funktionskomponente und habe das Problem beim erneuten Rendern von ContentThatGoesAboveTheFlatList. Jede Lösung für dieses
Problem
1
@Ponleu Sie können Ihre ContentThatGoesAboveTheFlatList-Komponente mithilfe des useMemovon 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. :)
Afraz Hussain
9

Nur für den Fall, dass dies jemandem hilft, habe ich den Fehler in meinem Fall auf diese Weise behoben.

Ich hatte ein FlatListverschachteltes in einem ScrollView:

render() {
    return (
        <ScrollView>
            <h1>{'My Title'}</h1>
            <FlatList
                data={this.state.myData}
                renderItem={({ item }) => {
                    return <p>{item.name}</p>;
                }}
            />
            {this.state.loading && <h2>{'Loading...'}</h2>}
        </ScrollView>
    );
}

und ich wurde das los, ScrollViewindem ich das benutzte FlatList, um alles zu rendern, was ich brauchte, was die Warnung loswurde:

render() {
    const getHeader = () => {
        return <h1>{'My Title'}</h1>;
    };

    const getFooter = () => {
        if (this.state.loading) {
            return null;
        }
        return <h2>{'Loading...'}</h2>;
    };

    return (
        <FlatList
            data={this.state.myData}
            renderItem={({ item }) => {
                return <p>{item.name}</p>;
            }}
            ListHeaderComponent={getHeader}
            ListFooterComponent={getFooter}
        />
    );
}
Edward D'Souza
quelle
4

Schauen Sie sich die Beispiele in Dokumenten an, von denen ich den Container geändert habe:

<ScrollView>
    <FlatList ... />
</ScrollView>

zu:

<SafeAreaView style={{flex: 1}}>
    <FlatList ... />
</SafeAreaView>

und all diese Warnungen verschwanden.

Variag
quelle
6
Was ist, wenn ich Inhalte über FlatListInnenseiten rendere ScrollViewund möchte, dass diese Inhalte scrollbar sind?
Ponleu
Es ist keine gute Benutzererfahrung, zwei scrollbare Ansichten nebeneinander zu haben. Ich würde versuchen, es so zu verschachteln: '<View> <ScrollView> <Content /> </ ScrollView> <FlatList ... /> </ View>' (nicht getestet)
Variag
Ich bin mir ziemlich sicher, dass FlatList keine weitere Schriftrolle erstellen wird, es sei denn, wir wickeln sie in einen Container mit der angegebenen Höhe.
Ponleu
1
Ich habe das gleiche Problem wie @Ponleu. Ich habe eine ScrollViewInnenseite , dass einige Inhalte und dann FlatListauch innerhalb der ScrollView. Und ich möchte, dass der gesamte Bildschirm zusammen rollt.
David Schilling
2
Wie löse ich dieses Problem in Android?
MD. IBRAHIM KHALIL TANIM
0

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

tvankith
quelle
0

Die Warnung wird angezeigt , da ScrollViewund FlatListdie gleiche Logik teilen, wenn FlatListLauf im Innern ScrollView, es dupliziert ist

Übrigens SafeAreaViewfunktioniert das bei mir nicht, der einzige Weg zu lösen ist

<ScrollView>
    {data.map((item, index) => {
        ...your code
    }}
</ScrollView>

Der Fehler verschwindet

Tuan Dat Tran
quelle
0

Ich habe versucht, dies zu lösen, einschließlich ListHeaderComponentoder ListFooterComponent, aber alles passte nicht zu mir.

Das Layout, das ich erreichen wollte, ist wie folgt, und ich wollte einmal gescrollt werden.

<ScrollView>
  <View>I'm the first view</View>
  <View>I'm the second view</View>
  <MyFlatList />
</ScrollView>

Zuerst möchte ich mich bei diesem Thema und den Kommentaren bedanken, die mir viele Ideen gegeben haben.

Ich dachte an ListHeaderComponentOrte über der Flatlist, aber da meine FlatlistRichtung Spalte war, ging der Header, den ich platzieren wollte, links von Flatlist:(

Dann musste ich etwas anprobieren VirtualizedList-backed. Ich habe gerade versucht, alle Komponenten einzupacken VirtualizedList, wo renderItemsgibt Index und dort konnte ich Komponenten bedingt übergeben renderItems.

Ich hätte damit arbeiten können Flatlist, aber ich habe es noch nicht versucht.
Endlich sieht es so aus.

<View>
  <Virtualizedlist
    data={[]}
    initialNumToRender={1}
    renderItem={(props)=>{
      props.index===0 ? (1st view here) : props.index===1 ? (2nd view here) : (my flatlist)
    }}
    keyExtractor={item => item.key}
    getItemCount={2}
    getItem={ (data, index) => {
      return {
        id: Math.random().toString(12).substring(0),
      }
    }}
  />
</View>

(inside which lazyly renders↓)
  <View>I'm the first view</View>
  <View>I'm the second view</View>
  <MyFlatList />  

und natürlich in der Lage, den gesamten Bildschirm zu scrollen.

Takahiro Nishino
quelle
-6

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:

<ScrollView>
    <FlatList **horizontal** ... />
</ScrollView>

NB: Ihre FlatList wird horizontal gerendert

Brahim DEBBAGH
quelle
Sie haben die Frage falsch verstanden
Giorgi Gvimradze