React-Native otro contenedor respaldado por VirtualizedList

Después de actualizar a react-native 0.61, recibo muchas advertencias como esta:

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

¿Cuál es el otro VirtualizedList-backed containerque debo usar, y por qué ahora se recomienda no usar así?

Si alguien todavía está buscando una sugerencia sobre el problema que @Ponleu y @David Schilling han descrito aquí (con respecto al contenido que va por encima de la lista plana), entonces este es el enfoque que tomé:

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

Puede leer más sobre esto aquí: https://facebook.github.io/react-native/docs/flatlist#listheadercomponent

Esperemos que ayude a alguien. :)

En caso de que esto ayude a alguien, así es como solucioné el error en mi caso.

Tenía un FlatListanidado dentro de 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>
    );
}

y me deshice del ScrollViewuso de FlatListpara renderizar todo lo que necesitaba, lo que eliminó la advertencia:

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

Mirando los ejemplos en documentos he cambiado el contenedor de:

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

a:

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

y todas esas advertencias desaparecieron.

En mi opinión, puedo usar el mapa en lugar de FlatList. Pero en mi caso no quiero mostrar una lista grande. No usar FlatList puede causar problemas de rendimiento. así que usé esto para suprimir la advertencia https://github.com/GeekyAnts/NativeBase/issues/2947#issuecomment-549210509

La advertencia aparece porque ScrollViewy FlatListcomparte la misma lógica, si se FlatListejecuta dentro ScrollView, está duplicada

Por cierto SafeAreaViewno funciona para mí, la única forma de resolver es

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

El error desaparece

Intenté algunas formas de resolver esto, incluyendo ListHeaderComponento ListFooterComponent, pero no me quedó bien.

El diseño que quería lograr es así, y quería que me desplazaran una vez.

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

Primero quiero agradecer este problema y comentarios, que me dieron muchas ideas.

Estaba pensando en ListHeaderComponentlugares sobre la lista plana, pero como Flatlistla dirección de mi era la columna, el encabezado que quería colocar estaba a la izquierda de Flatlist:(

Luego tuve que probarme VirtualizedList-backedalgo. Solo intenté empaquetar todos los componentes VirtualizedList, donde renderItemsda índice y allí podría pasar componentes condicionalmente renderItems.

Podría haber trabajado con esto Flatlist, pero aún no lo he intentado.
Finalmente se ve así.

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

y, por supuesto, capaz de desplazar toda la pantalla.

Este problema viene cuando está usando <FlatList />adentro <ScrollView>con la misma orientación.

Para solucionar esto, simplemente agregue "horizontal" a su FlatList:

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

NB: su FlatList se representará horizontalmente