J'essaie d'afficher une FlatList avec un ensemble de données de 86 éléments et il n'en affiche que 10 et ne chargera pas plus.
J'ai essayé de jouer avec la taille du conteneur à travers les styles mais en vain.
return (
<View>
<Text>{this.state.cards.length}</Text>
<FlatList
data={this.state.cards}
renderItem={(theInfo) => <CardImage key={theInfo.key} info={theInfo}/>}
keyExtractor={(item, index) => item.toString()}
/>
</View>
);
Je m'attends à ce que cela affiche 86 éléments (this.state.cards.length affiche 86), l'application n'en affiche que 10 et ne se chargera pas davantage.
Edit: rn version 0.57.8
3 Réponses :
Vous devez définir la propriété suivante
initialNumToRender={50}
La valeur par défaut étant 10
Source: https://facebook.github.io/react-native/docs/flatlist# initialnumtorender
Pouvez-vous ajouter la source à cela?
Source ajoutée. @Mukeyii
Il n'y a pas de valeur par défaut donnée dans la documentation pour autant que je puisse voir. Et je ne pense pas non plus que le rendu de 50 lignes dans le lot initial soit bon pour les performances.
Je l'ai fait mais maintenant il n'en affiche que 50. Je ne charge toujours pas plus. Idéalement, j'aimerais d'abord rendre 10 puis charger le reste si nécessaire.
@Mukeyii Ici vous pouvez trouver la valeur par défaut sous la forme 10 reactnative.dev/docs/optimizing-flatlist-configuration
Changer la vue en ScrollView
Code mis à jour:
return (
<ScrollView>
<Text>{this.state.cards.length}</Text>
<FlatList
data={this.state.cards}
renderItem={(theInfo) => <CardImage key={theInfo.key} info={theInfo}/>}
keyExtractor={(item, index) => item.toString()}
/>
</ScrollView>
);
L'utilisation de initialNumToRender n'est pas une solution appropriée pour cela. Cela affecte le traitement car toute la liste est rendue par flatList .
Si vous utilisez une animation n'importe où dans votre projet, vous pouvez ajouter le paramètre isInteraction: false dans Animated.timing ()
par exemple -
Animated.timing(
this.spinValue,
{
toValue: -1,
duration: 4000,
easing: Easing.linear,
isInteraction: false
}
).start( ()=> this.spin() )
pour plus d'informations, vous pouvez voir ce commentaire dans les problèmes du projet react-native.
J'espère que cela vous aidera!
Si je ne me trompe pas,
keyExtractor = {(item, index) => item.toString ()}obtientobjectcomme premier paramètre (item ) etitem.toString ()sera'[objet objet]'. Essayez de supprimer l'accessoirekeyExtractorcar vous ajoutez déjà l'accessoirekeydansrenderItem@ RamKrish2079
kyeExtractorsemble correct, voir facebook. github.io/react-native/docs/using-a-listviewversion native de réaction?
@SantoshSharma 0.57.8, j'ai édité le post
Changer la vue en ScrollView