React-Native ein weiterer von VirtualizedList unterstützter Container

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?

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. :) :)

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}
        />
    );
}

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.

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

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

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.

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