React-Native un altro contenitore supportato da VirtualizedList

Dopo aver effettuato l'aggiornamento a 0.61 nativo per reazione, ricevo molti avvisi del genere:

VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.

Qual è l'altro VirtualizedList-backed containerche dovrei usare, e perché ora si consiglia di non usare così?

Se qualcuno sta ancora cercando un suggerimento sul problema che @Ponleu e @David Schilling hanno descritto qui (per quanto riguarda i contenuti che vanno al di sopra della FlatList), questo è l'approccio che ho seguito:

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

Puoi leggere di più su questo qui: https://facebook.github.io/react-native/docs/flatlist#listheadercomponent

Spero che aiuti qualcuno. :)

Nel caso in cui questo aiuti qualcuno, ecco come ho corretto l'errore nel mio caso.

Ho avuto un FlatListnidificato all'interno di un 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>
    );
}

e mi sono liberato di ScrollViewusando il FlatListper rendere tutto ciò di cui avevo bisogno, che si è sbarazzato dell'avvertimento:

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

Guardando gli esempi nei documenti ho cambiato contenitore da:

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

per:

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

e tutti quegli avvertimenti sono scomparsi.

Secondo me posso usare map invece di FlatList. Ma nel mio caso non voglio mostrare un grande elenco. Non utilizzare FlatList può causare problemi di prestazioni. quindi l'ho usato per sopprimere l'avvertimento https://github.com/GeekyAnts/NativeBase/issues/2947#issuecomment-549210509

L'avviso appare perché ScrollViewe FlatListcondivide la stessa logica, se FlatListeseguito all'interno ScrollView, è duplicato

A proposito SafeAreaView, non funziona per me, l'unico modo per risolverlo è

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

L'errore scompare

Ho provato alcuni modi per risolvere questo problema, incluso ListHeaderComponento ListFooterComponent, ma non è stato tutto adatto a me.

il layout che volevo ottenere è così, e volevo far scorrere una volta dentro.

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

Innanzitutto voglio dire grazie a questo problema e ai commenti, che mi hanno dato un sacco di idee.

Stavo pensando a ListHeaderComponentposti sopra la Flatlist, ma dal mioFlatlist direzione era la colonna, l'intestazione che volevo posizionare andava a sinistra delFlatlist :(

Quindi ho dovuto provare VirtualizedList-backed. Ho appena provato a inserire tutti i componenti VirtualizedList, doverenderItems dà indice e lì ho potuto passare i componenti in modo condizionalerenderItems .

Avrei potuto lavorare con questo Flatlist, ma non ci ho ancora provato.
Finalmente sembra così.

<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 />  

e ovviamente in grado di scorrere l'intero schermo.

Questo problema si presenta quando si utilizza <FlatList /> interno <ScrollView>con lo stesso orientamento.

Per risolvere questo problema, aggiungi "orizzontale" alla tua FlatList:

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

NB: il tuo FlatList verrà visualizzato in orizzontale