Maintenant, bien sûr, ici, j'utilise une vue de défilement et vous avez appris qu'une FlatList est meilleure si vous
avez une liste où vous ne savez pas combien d'éléments vous y trouverez.
Maintenant, pour notre jeu, une vue de défilement sera très bien parce que oui, nous ne savons
pas combien d'articles ce sera et théoriquement, pour deviner très mal, nous aurons environ 100 articles dedans mais cela n'arrivera presque jamais
et par conséquent, cette liste ne contiendra généralement pas plus de 10, 15, 20 éléments au maximum et, par conséquent, cela ne nous causera probablement aucun
problème de performances et l'utilisation d'une vue de défilement ici est tout
à fait correcte, car oui, c'est une liste qui contient plusieurs éléments, qui dépassera nos limites d'écran mais
ce sera rarement une liste avec beaucoup d'éléments, ce ne sera jamais une liste avec plus de 100
éléments en raison de la façon dont notre jeu fonctionne.
Donc, l'affichage par défilement serait bien ici, mais si vous souhaitez toujours utiliser une FlatList, permettez-moi de vous
le montrer également.
Pour cela, nous pouvons ajouter FlatList ici et cela signifie bien sûr que nous devons importer FlatList
depuis
React Native, donc ici, je vais importer FlatList comme ceci et
avec FlatList importé, vous avez appris que FlatList prend un accessoire de données qui pointe vers le les données que vous
souhaitez alimenter et dans notre cas ici, ce serait
notre tableau de suppositions passées et que vous avez ensuite un accessoire d'élément de rendu qui vous permet de produire les éléments pour chaque élément dans les données que
vous alimentez, alors sortez le composants pour chaque élément dans les données et ici je peux pointer
sur l'élément de
liste de rendu qui doit être appelé. En ce moment, cela
ne fonctionnera pas pour deux raisons. D'une part, l'élément de liste de rendu attend
deux valeurs, mais l'élément de rendu ici sur FlatList ne transmettra qu'un seul élément et ce sont les données de l'élément qui contiennent
des informations sur l'index et sur l'élément que nous sommes sur le point d'imprimer.
L'autre chose qui nous causera des problèmes est la clé.
Vous vous souvenez peut-être que FlatList s'attend à obtenir des objets dans le tableau que vous passez dans lequel chaque objet a
une propriété de clé qu'il peut extraire et utiliser comme clé pour un nouveau rendu efficace.
Maintenant, nous n'avons pas de tableau d'objets ici, nous avons un tableau de nombres et cela ne fonctionnera pas.
Maintenant, nous pouvons ajouter un extracteur de clé ici à FlatList pour remplacer sa valeur par défaut, l'extracteur de clé prend une
fonction qui obtient notre élément à la fin, puis nous devons dire à FlatList où trouver notre clé et par défaut,
il recherche l'élément. clé ou pour l'article. id, ici,
nous voulons lui dire que l'élément lui-même est la clé.
Maintenant, FlatList veut cependant une clé qui est une chaîne et non un nombre,
sinon elle recevra un avertissement.
Donc, la prochaine chose que nous devons faire est que les suppositions passées que nous gérons devraient être des chaînes et ce n'est pas un
problème parce que nous les utilisons uniquement pour les imprimer à l'écran de toute façon, donc nous
ne nous soucions pas vraiment si elles sont techniquement stocké sous forme de nombre ou de chaîne et donc ici
lorsque nous ajoutons une nouvelle supposition, nous pouvons simplement appeler toString qui est une méthode Javascript intégrée sur le nombre pour le convertir en
type de chaîne et faire de même pour la valeur initiale de cours. Ici, où j'ajoute ma supposition initiale, appelez à Strings là
aussi et maintenant nous avons des
chaînes et elles peuvent donc être utilisées comme des nombres. Maintenant, comme je l'ai dit, l'élément de liste de rendu attend
les mauvais arguments, numOfRound ne fonctionnera pas comme cela, la valeur ne fonctionnera pas non plus comme ceci, à
la place, nous obtenons les données de
l'élément et nous pouvons toujours nous attendre à un argument supplémentaire, cependant, cela doit être attendu comme premier argument car nous pouvons maintenant simplement descendre pour
rendre l'élément ici sur la FlatList et lier les arguments qui devraient être passés, afin que nous puissions ajouter des arguments
supplémentaires en plus de l'argument par défaut qui sera transmis. Maintenant, bind s'attend à ce que ce soit le premier argument afin que nous
définissions ce à quoi cela doit se référer dans la fonction que nous appelons, nous ne nous soucions pas ici, donc je vais
juste l'ajouter à
cela, vous pouvez également le définir sur null, il n'a pas d'importance.
Le deuxième argument que nous ajoutons ici sera alors le premier argument reçu par
cette fonction et qui devrait être notre nombre rond
qui devrait être pastGuesses. longueur. Auparavant, j'ai déduit l'index ici, mais cela ne
fonctionne plus car je n'ai plus accès à
l'index, nous ne mappons pas manuellement. Je vais donc simplement passer la
longueur là-dedans et la bonne chose est que je peux obtenir l'index à l'intérieur de l'élément de rendu à partir des données de l'élément.
Cet argument par défaut sera également transmis par React et l'argument par défaut est automatiquement passé
au dernier argument.
Ainsi, les premiers arguments seront les arguments que
vous définissez dans bind, dans
ce cas, ce n'est qu'un argument, notre nombre de tours ou notre longueur du tableau, puis tous les arguments par défaut
qui auraient été passés normalement seront ajoutés comme arguments supplémentaires à la fin de votre liste d'arguments ici.
Maintenant, ici, le nombre de tours n'est également
plus un nom approprié, mais plutôt la longueur de la liste, cela ressemble à un meilleur nom
parce que c'est ce que nous obtenons, mais ici nous pouvons calculer notre nombre de tours en utilisant
la longueur de la liste, puis en déduisant itemData. index parce que les données d'élément que vous obtenez automatiquement par React Native sont un
objet qui a également une propriété d'index qui est l'index de l'élément que vous sortez et vous obtenez également itemData. article et c'est l'article lui-même
qui dans notre cas est la supposition.
Nous n'avons désormais plus à ajouter de clé ici car cette saisie sera effectuée par React
Native grâce à la FlatList. Cela représentait donc beaucoup de travail, maintenant
nous devrions pouvoir à nouveau générer une liste.
Donc, sauvegardons cela et essayons ici
et cela semble fonctionner, mais
bien sûr, nous avons perdu le positionnement maintenant. Auparavant, nous avons ajouté un style de conteneur de contenu, une liste
de styles ici à la vue de défilement, la bonne
chose est que vous pouvez également le faire sur la FlatList. Bien que vous puissiez ajouter un style comme sur la vue
de défilement, ce style vous permet par exemple d'ajouter une marge autour de la liste mais il ne vous permet pas d'aligner le contenu à
l'intérieur de la liste. Pour cela, utilisez
plutôt le style de conteneur de contenu qui est également pris en charge par FlatList et
donc ici, nous pouvons également pointer vers la liste des styles et, par conséquent, cela devrait maintenant fonctionner comme notre
vue de défilement le faisait auparavant.
Alors essayons et vous verrez que nous commençons en bas ici et nous pouvons maintenant commencer à ajouter des éléments.
Voyons maintenant si le défilement fonctionne également comme il se
doit, oui, et nous pouvons voir le dernier élément et l'élément le plus ancien et oui,
il y a quelque chose de mal avec le positionnement des éléments dans l'élément
de liste et je reviendrai sur cela, mais généralement, cela fonctionne. Essayons également de le tester sur Android, alors
commençons à deviner et
espérons que nous ne résoudrons pas cela trop tôt, non, cela fonctionne et
ici, nous
pouvons également faire défiler comme vous pouvez le voir. Donc, cela fonctionne également avec la FlatList,
maintenant qu'en est-il de cette étrange distribution de contenu ici dans nos éléments de liste?
Eh bien, vous remarquerez que les éléments de la liste eux-mêmes sont plus gros qu'auparavant.
Le contenu est distribué comme si l'élément de liste se terminait ici et c'est effectivement le problème.
Nous avons une largeur de 60% de l'élément de liste et notre contenu respecte cela, mais nos frontières ne
le sont étrangement pas.
Pour corriger ce comportement étrange de FlatList, vous pouvez aller dans votre conteneur de liste qui contient
la liste globale et y définir la largeur à la largeur de liste souhaitée à la fin, comme disons 60%
et donner à vos éléments de liste une largeur de 100%.
Alors maintenant, le conteneur de liste est globalement plus petit, moins large et donc les éléments de liste supposent cette largeur et ont la
même largeur et puisque vous
devez rarement utiliser le cas où votre conteneur de liste doit être plus large que les éléments
de liste, car quoi d'autre serait là-bas dans le conteneur de liste, cela devrait être une bonne solution.
Maintenant, si vous faites cela, vous remarquerez que la largeur est meilleure, mais en fait, le positionnement est maintenant un problème.
Eh bien, puisque nous avons maintenant la largeur contrôlée sur le conteneur de liste extérieur, nous pouvons nous
débarrasser d'aligner les éléments au centre ici sur la liste elle-même,
donc la liste, n'oubliez pas, a été le style ajouté au style de conteneur de contenu.
Nous conservons le style mais j'ai supprimé aligner les éléments au centre car il n'y a plus
rien à centrer maintenant, la largeur est définie sur le conteneur de liste
et non sur les éléments de la liste, donc grâce à eux à 100%, ils sont centrés automatiquement car ils prennent de
toute façon sur toute la largeur et donc maintenant
si nous essayons à nouveau, cela semble fonctionner beaucoup mieux et les éléments de la liste sont en fait disposés comme ils devraient l'être.
Donc, si nous en avons un autre ici qui peut prendre un peu plus de temps, oui, en regardant
bien, alors ici nous pouvons voir que nous obtenons le même comportement qu'auparavant, nous obtenons le style agréable et nous avons également travaillé
autour de ce comportement différent que FlatList nous donne. Essayons également ceci sur Android ici et commençons un
nouveau jeu là-bas, oh
ce ne sera pas un jeu
long, assez
long, donc là aussi, tout fonctionne comme il se doit.
Et voici comment vous pouvez le faire avec FlatList, comme vous le voyez fonctionne un peu différemment, nous devons
contourner son comportement différent là-bas quand
il s'agit d'ajuster la largeur des éléments de la liste, mais en fin de compte, cela fonctionne maintenant et par
conséquent, vous avez maintenant appris à disposer vos objets avec FlatList, avec la vue de défilement, ce qui est spécial à
propos de ces vues de liste ou de ces vues à défilement en général et comment vous pouvez toujours disposer vos objets comme
vous le souhaitez.