web-dev-qa-db-fra.com

ReactNative FlatList afficher tous les éléments à la fois?

J'utilise le nouveau composant Liste de ReactNative - FlatList.

Il semble que FlatList rend tous les éléments en même temps, même si la cellule n’est pas réellement visible à l’écran.

<FlatList data={this.props.items} 
          keyExtractor={(item, index) => generateKey()}
         renderItem={this.renderStrip}/>

 renderItem = ({item}) => { 
   console.warn('rendered!');
   return <View style={{height:200, height: 100}} />
}

La définition de 30 éléments et l’apparence de "restitution" a été appelée en fonction du nombre total d’éléments.

Je pensais que FlatList ressemblait à la façon dont RecycleView sous Android fonctionne: restituer un élément uniquement lorsqu'il est sur le point d'être visible à l'écran.

Est-ce que je manque quelque chose? Cela ne va-t-il pas diminuer les performances?
Je souhaitais que le rendu d’un élément ne puisse être rendu que lorsqu’il est sur le point d’être montré.

react-nativereact-native-flatlist
6
Rom Shiri

Avait le même problème dans l'une de mes applications. Cela m'a pris quelques heures pour résoudre ce problème.

⇓⇓⇓

TDLR; Vérifiez que vous n'avez pas imbriqué votre FlatList dans une ScrollList (ou un autre type de liste).

⇑⇑⇑

Description détaillée:  

PROBL&EGRAVE;ME

À l'instar de Thread-Ouvre, ma Flatlist commence par compter le nombre de rendus que j'ai définis dans initialNumToRender, mais commence immédiatement à rendre le reste de la liste.

Environnement

J'utilise native-base.io comme UI-Library et encapsule le contenu de l'écran avec le composant 

Solution

J'ai compris, ce composant de base native <Content> remplace ScrollList. Une FlatList à l'intérieur d'une ScrollList vous dirigera vers des résultats étranges. Lorsque j'ai remplacé le composant de l'écran par un <View>, tout fonctionne comme prévu.

2
suther

FlatList rend trop d'éléments à l'avance pour obtenir un meilleur taux de remplissage. Nous avons des problèmes similaires. Nous construisons RecyclerListView pour résoudre ces problèmes. Très similaire à RecyclerView mais c'est JS seulement. Il est plus rapide que FlatList et testé au combat chez Flipkart. Tu peux l'essayer.

Lien: https://github.com/Flipkart/ReactEssentials

Vous pouvez en savoir plus à ce sujet ici: https://medium.com/@naqvitalha/recyclerlistview-high-performance-listview-for-react-native-and-web-e368d6f0d7ef

0
naqvitalha

c'est pareil. Dans la documentation, vous trouverez les éléments suivants:

Pour limiter la mémoire et permettre un défilement régulier, le contenu est rendu de manière asynchrone hors écran. Cela signifie qu'il est possible de faire défiler plus rapidement que le taux de remplissage et de voir momentanément le contenu vierge. C’est un compromis qui peut être ajusté pour répondre aux besoins de chaque application, et nous travaillons à l’améliorer en coulisse.

Donc, il ne rend pas tous les éléments à la fois.

et en outre:

Ceci est un PureComponent ce qui signifie qu'il ne sera pas rendu si les accessoires restent peu profonds - égaux. Assurez-vous que tout ce dont dépend votre fonction renderItem est passé en tant que prop (par exemple, extraData) qui n'est pas === après les mises à jour, sinon votre interface utilisateur risque de ne pas être mise à jour en cas de modification. Cela inclut l'état de données et l'état du composant parent.

Faites-moi savoir si vous avez besoin de plus amples détails.

0
EnriqueDev