Collation: https://snack.expo.io/@mr3mo/snack-flatlist

J'essaie de rendre un écran où il affichera divers graphiques et un ou plusieurs tableaux. L'écran doit pouvoir être déroulé.

J'ai utilisé un ScrollView pour le défilement parent avant, mais cela me donnait un avertissement car ce n'est pas une bonne pratique d'inclure des FlatLists dans un ScrollView pour des raisons de performances.

J'ai donc créé ce VirtualizedView qui est une FlatList où tous les composants de mon écran sont rendus dans le ListHeaderComponent.

Malheureusement, cela empêche mon enfant FlatList de pouvoir faire défiler.

J'ai essayé beaucoup de choses, y compris la configuration d'un maxHeight, flexGrow, etc. sans beaucoup de chance.

Toute aide serait appréciée. Je vous remercie

1
mr3mo 12 mars 2021 à 18:07

1 réponse

Meilleure réponse

J'ai pu résoudre ce problème.

L'astuce consiste à envelopper la liste dans un composant ScrollView et à envelopper tout le composant écran dans le composant VirtualizedVIew que j'ai partagé dans la collation.

Voici à quoi ressemble mon fichier LogsScreen.jsx:

import { VirtualizedView } from "../components";
...
return (
  <View>
    <VirtualizedView>
      ...
    <ScrollView>
      <FlatList>
      ...
      </FlatList>
    </ScrollView>
    </VirtualizedView>
   </View>
)

Inside VirtualizedView.jsx:

import React from 'react';
import { FlatList, View } from 'react-native';

export default function VirtualizedView(props) {
  return (
    <FlatList
      data={[]}
      ListEmptyComponent={null}
      keyExtractor={() => "dummy"}
      renderItem={null}
      ListHeaderComponent={() => (
        <>{props.children}</>
      )}
      ListFooterComponent={<View style={{height: 20}}/>}
    />
  );
}
0
mr3mo 15 mars 2021 à 04:00