React-Native outro contêiner suportado por VirtualizedList

Após a atualização para o react-native 0.61, recebo muitos avisos assim:

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

Qual é o outro VirtualizedList-backed containerque devo usar e por que agora é aconselhável não usar dessa maneira?

Se alguém ainda está procurando uma sugestão para o problema descrito por @Ponleu e @David Schilling aqui (sobre conteúdo que está acima do FlatList), essa é a abordagem que eu adotei:

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

Você pode ler mais sobre isso aqui: https://facebook.github.io/react-native/docs/flatlist#listheadercomponent

Espero que ajude alguém. :)

Caso isso ajude alguém, foi assim que corrigi o erro no meu caso.

Eu tinha um FlatListaninhado dentro de um 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 me livrei disso ScrollViewusando o FlatListpara renderizar tudo o que eu precisava, o que acabou com o aviso:

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

Observando os exemplos nos documentos dos quais mudei o contêiner de:

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

para:

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

e todos esses avisos desapareceram.

Na minha opinião, eu posso usar o mapa em vez do FlatList. Mas no meu caso, não quero mostrar uma lista grande. Não usar o FlatList pode causar problemas de desempenho. então usei isso para suprimir o aviso https://github.com/GeekyAnts/NativeBase/issues/2947#issuecomment-549210509

O aviso aparece porque, ScrollViewe FlatListcompartilha a mesma lógica, se FlatListexecutado dentro ScrollView, é duplicado

A propósito SafeAreaView, não funciona para mim, a única maneira de resolver é

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

O erro desaparece

Eu tentei algumas maneiras de resolver isso, incluindo ListHeaderComponentor ListFooterComponent, mas tudo não se encaixava para mim.

o layout que eu queria alcançar era assim, e eu queria ser rolado uma vez.

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

Primeiro, quero agradecer a essa questão e comentários, que me deram várias idéias.

Eu estava pensando em ListHeaderComponentlugares acima da Flatlist, mas como Flatlista direção da minha coluna era coluna, o cabeçalho que eu queria colocar ficava à esquerda do Flatlist:(

Então eu tive que tentar VirtualizedList-backedalgo. Eu apenas tentei empacotar todos os componentes VirtualizedList, onde renderItemsdá o índice e lá eu poderia passar os componentes condicionalmente renderItems.

Eu poderia ter trabalhado nisso Flatlist, mas ainda não tentei.
Finalmente, fica assim.

<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, claro, capaz de rolar a tela inteira.

Esse problema ocorre quando você está usando o <FlatList />interior <ScrollView>com a mesma orientação.

Para corrigir isso, basta adicionar "horizontal" ao seu FlatList:

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

NB: O seu FlatList será renderizado horizontalmente