React-Native un autre conteneur basé sur VirtualizedList

Question

Après la mise à niveau vers react-native 0.61, je reçois de nombreux avertissements comme celui-ci :

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

Quel est l'autre VirtualizedList-backed container que je devrais utiliser, et pourquoi est-il maintenant conseillé de ne pas l'utiliser comme ça ?

Answer 1

Si quelqu'un cherche toujours une suggestion au problème que @Ponleu et @David Schilling ont décrit ici (concernant le contenu qui dépasse la FlatList), voici l'approche que j'ai adoptée :

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

Vous pouvez en savoir plus à ce sujet ici : https://facebook.github.io/react-native/docs/flatlist#listheadercomponent

Espérons que cela aide quelqu'un. :)

Answer 2

Juste au cas où cela aiderait quelqu'un, voici comment j'ai corrigé l'erreur dans mon cas.

J'avais un FlatList imbriqué dans 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>
    );
}

et je me suis débarrassé du ScrollView en utilisant le FlatList pour afficher tout ce dont j'avais besoin, ce qui a supprimé l'avertissement :

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

Answer 3

L'avertissement apparaît car ScrollView et FlatList partagent la même logique, si FlatList s'exécute dans ScrollView , il est dupliqué

Au fait, SafeAreaView ne fonctionne pas pour moi, la seule façon de résoudre est

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

L'erreur disparaît

Answer 4

En regardant les exemples dans la documentation, j'ai changé de conteneur :

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

à:

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

et tous ces avertissements ont disparu.