React-Native, otro contenedor respaldado por VirtualizedList
Después de actualizar a reaccionar-nativo 0.61, recibo muchas advertencias como esa:
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 usarlo así?
Si alguien todavía está buscando una sugerencia para el problema que @Ponleu y @David Schilling describieron aquí (con respecto al contenido que va por encima de FlatList), 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
Ojalá 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>
<Text>{'My Title'}</Text>
<FlatList
data={this.state.myData}
renderItem={({ item }) => {
return <p>{item.name}</p>;
}}
/>
{this.state.loading && <Text>{'Loading...'}</Text>}
</ScrollView>
);
}
y me deshice de él ScrollViewusando FlatListpara representar todo lo que necesitaba, lo que eliminó la advertencia:
render() {
const getHeader = () => {
return <Text>{'My Title'}</Text>;
};
const getFooter = () => {
if (this.state.loading) {
return null;
}
return <Text>{'Loading...'}</Text>;
};
return (
<FlatList
data={this.state.myData}
renderItem={({ item }) => {
return <p>{item.name}</p>;
}}
ListHeaderComponent={getHeader}
ListFooterComponent={getFooter}
/>
);
}
