1 00:00:02,180 --> 00:00:06,770 Maintenant, bien sûr, ici, j'utilise une vue de défilement et vous avez appris qu'une FlatList est meilleure si vous 2 00:00:06,770 --> 00:00:10,160 avez une liste où vous ne savez pas combien d'éléments vous y trouverez. 3 00:00:10,190 --> 00:00:16,490 Maintenant, pour notre jeu, une vue de défilement sera très bien parce que oui, nous ne savons 4 00:00:16,490 --> 00:00:24,320 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 5 00:00:24,380 --> 00:00:34,020 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 6 00:00:34,110 --> 00:00:38,480 problème de performances et l'utilisation d'une vue de défilement ici est tout 7 00:00:38,520 --> 00:00:45,210 à fait correcte, car oui, c'est une liste qui contient plusieurs éléments, qui dépassera nos limites d'écran mais 8 00:00:45,450 --> 00:00:52,140 ce sera rarement une liste avec beaucoup d'éléments, ce ne sera jamais une liste avec plus de 100 9 00:00:52,140 --> 00:00:56,370 éléments en raison de la façon dont notre jeu fonctionne. 10 00:00:56,370 --> 00:01:01,770 Donc, l'affichage par défilement serait bien ici, mais si vous souhaitez toujours utiliser une FlatList, permettez-moi de vous 11 00:01:01,800 --> 00:01:03,050 le montrer également. 12 00:01:03,060 --> 00:01:08,460 Pour cela, nous pouvons ajouter FlatList ici et cela signifie bien sûr que nous devons importer FlatList 13 00:01:08,460 --> 00:01:08,910 depuis 14 00:01:09,390 --> 00:01:13,020 React Native, donc ici, je vais importer FlatList comme ceci et 15 00:01:13,020 --> 00:01:19,590 avec FlatList importé, vous avez appris que FlatList prend un accessoire de données qui pointe vers le les données que vous 16 00:01:19,670 --> 00:01:22,630 souhaitez alimenter et dans notre cas ici, ce serait 17 00:01:22,680 --> 00:01:31,710 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 18 00:01:31,860 --> 00:01:37,350 vous alimentez, alors sortez le composants pour chaque élément dans les données et ici je peux pointer 19 00:01:37,350 --> 00:01:38,250 sur l'élément de 20 00:01:38,250 --> 00:01:42,870 liste de rendu qui doit être appelé. En ce moment, cela 21 00:01:42,870 --> 00:01:48,390 ne fonctionnera pas pour deux raisons. D'une part, l'élément de liste de rendu attend 22 00:01:48,750 --> 00:01:55,620 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 23 00:01:55,620 --> 00:01:59,950 des informations sur l'index et sur l'élément que nous sommes sur le point d'imprimer. 24 00:01:59,970 --> 00:02:03,510 L'autre chose qui nous causera des problèmes est la clé. 25 00:02:03,540 --> 00:02:10,710 Vous vous souvenez peut-être que FlatList s'attend à obtenir des objets dans le tableau que vous passez dans lequel chaque objet a 26 00:02:10,740 --> 00:02:16,130 une propriété de clé qu'il peut extraire et utiliser comme clé pour un nouveau rendu efficace. 27 00:02:16,140 --> 00:02:21,880 Maintenant, nous n'avons pas de tableau d'objets ici, nous avons un tableau de nombres et cela ne fonctionnera pas. 28 00:02:21,960 --> 00:02:28,680 Maintenant, nous pouvons ajouter un extracteur de clé ici à FlatList pour remplacer sa valeur par défaut, l'extracteur de clé prend une 29 00:02:28,770 --> 00:02:35,070 fonction qui obtient notre élément à la fin, puis nous devons dire à FlatList où trouver notre clé et par défaut, 30 00:02:35,070 --> 00:02:38,170 il recherche l'élément. clé ou pour l'article. id, ici, 31 00:02:38,280 --> 00:02:41,860 nous voulons lui dire que l'élément lui-même est la clé. 32 00:02:42,090 --> 00:02:46,580 Maintenant, FlatList veut cependant une clé qui est une chaîne et non un nombre, 33 00:02:46,590 --> 00:02:48,510 sinon elle recevra un avertissement. 34 00:02:48,510 --> 00:02:54,480 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 35 00:02:54,480 --> 00:02:58,800 problème parce que nous les utilisons uniquement pour les imprimer à l'écran de toute façon, donc nous 36 00:02:58,800 --> 00:03:03,750 ne nous soucions pas vraiment si elles sont techniquement stocké sous forme de nombre ou de chaîne et donc ici 37 00:03:03,750 --> 00:03:09,630 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 38 00:03:09,630 --> 00:03:16,490 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à 39 00:03:16,500 --> 00:03:19,140 aussi et maintenant nous avons des 40 00:03:19,140 --> 00:03:26,030 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 41 00:03:26,030 --> 00:03:31,940 les mauvais arguments, numOfRound ne fonctionnera pas comme cela, la valeur ne fonctionnera pas non plus comme ceci, à 42 00:03:31,940 --> 00:03:34,430 la place, nous obtenons les données de 43 00:03:34,550 --> 00:03:42,440 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 44 00:03:42,740 --> 00:03:49,280 rendre l'élément ici sur la FlatList et lier les arguments qui devraient être passés, afin que nous puissions ajouter des arguments 45 00:03:49,460 --> 00:03:55,330 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 46 00:03:55,350 --> 00:04:00,210 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 47 00:04:00,210 --> 00:04:00,920 juste l'ajouter à 48 00:04:00,920 --> 00:04:03,720 cela, vous pouvez également le définir sur null, il n'a pas d'importance. 49 00:04:03,750 --> 00:04:10,350 Le deuxième argument que nous ajoutons ici sera alors le premier argument reçu par 50 00:04:10,350 --> 00:04:14,830 cette fonction et qui devrait être notre nombre rond 51 00:04:14,860 --> 00:04:21,510 qui devrait être pastGuesses. longueur. Auparavant, j'ai déduit l'index ici, mais cela ne 52 00:04:21,510 --> 00:04:23,640 fonctionne plus car je n'ai plus accès à 53 00:04:23,640 --> 00:04:27,430 l'index, nous ne mappons pas manuellement. Je vais donc simplement passer la 54 00:04:27,700 --> 00:04:34,170 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. 55 00:04:34,170 --> 00:04:39,780 Cet argument par défaut sera également transmis par React et l'argument par défaut est automatiquement passé 56 00:04:39,840 --> 00:04:40,960 au dernier argument. 57 00:04:41,010 --> 00:04:43,890 Ainsi, les premiers arguments seront les arguments que 58 00:04:43,890 --> 00:04:45,840 vous définissez dans bind, dans 59 00:04:45,830 --> 00:04:52,620 ce cas, ce n'est qu'un argument, notre nombre de tours ou notre longueur du tableau, puis tous les arguments par défaut 60 00:04:52,620 --> 00:04:58,500 qui auraient été passés normalement seront ajoutés comme arguments supplémentaires à la fin de votre liste d'arguments ici. 61 00:04:58,500 --> 00:05:01,500 Maintenant, ici, le nombre de tours n'est également 62 00:05:01,500 --> 00:05:07,530 plus un nom approprié, mais plutôt la longueur de la liste, cela ressemble à un meilleur nom 63 00:05:07,580 --> 00:05:13,970 parce que c'est ce que nous obtenons, mais ici nous pouvons calculer notre nombre de tours en utilisant 64 00:05:13,970 --> 00:05:20,120 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 65 00:05:20,120 --> 00:05:27,440 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 66 00:05:27,920 --> 00:05:31,740 qui dans notre cas est la supposition. 67 00:05:32,000 --> 00:05:37,700 Nous n'avons désormais plus à ajouter de clé ici car cette saisie sera effectuée par React 68 00:05:37,700 --> 00:05:41,740 Native grâce à la FlatList. Cela représentait donc beaucoup de travail, maintenant 69 00:05:41,750 --> 00:05:43,940 nous devrions pouvoir à nouveau générer une liste. 70 00:05:43,940 --> 00:05:46,590 Donc, sauvegardons cela et essayons ici 71 00:05:46,590 --> 00:05:48,860 et cela semble fonctionner, mais 72 00:05:49,320 --> 00:05:55,440 bien sûr, nous avons perdu le positionnement maintenant. Auparavant, nous avons ajouté un style de conteneur de contenu, une liste 73 00:05:55,440 --> 00:05:58,300 de styles ici à la vue de défilement, la bonne 74 00:05:58,320 --> 00:06:04,200 chose est que vous pouvez également le faire sur la FlatList. Bien que vous puissiez ajouter un style comme sur la vue 75 00:06:04,200 --> 00:06:10,320 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 à 76 00:06:10,320 --> 00:06:12,510 l'intérieur de la liste. Pour cela, utilisez 77 00:06:12,510 --> 00:06:16,900 plutôt le style de conteneur de contenu qui est également pris en charge par FlatList et 78 00:06:16,980 --> 00:06:22,200 donc ici, nous pouvons également pointer vers la liste des styles et, par conséquent, cela devrait maintenant fonctionner comme notre 79 00:06:22,200 --> 00:06:23,750 vue de défilement le faisait auparavant. 80 00:06:23,760 --> 00:06:32,650 Alors essayons et vous verrez que nous commençons en bas ici et nous pouvons maintenant commencer à ajouter des éléments. 81 00:06:32,650 --> 00:06:35,390 Voyons maintenant si le défilement fonctionne également comme il se 82 00:06:36,050 --> 00:06:39,820 doit, oui, et nous pouvons voir le dernier élément et l'élément le plus ancien et oui, 83 00:06:39,950 --> 00:06:43,400 il y a quelque chose de mal avec le positionnement des éléments dans l'élément 84 00:06:43,420 --> 00:06:49,010 de liste et je reviendrai sur cela, mais généralement, cela fonctionne. Essayons également de le tester sur Android, alors 85 00:06:49,010 --> 00:06:50,130 commençons à deviner et 86 00:06:50,150 --> 00:06:54,610 espérons que nous ne résoudrons pas cela trop tôt, non, cela fonctionne et 87 00:06:54,630 --> 00:06:55,740 ici, nous 88 00:06:55,740 --> 00:07:02,200 pouvons également faire défiler comme vous pouvez le voir. Donc, cela fonctionne également avec la FlatList, 89 00:07:02,200 --> 00:07:08,160 maintenant qu'en est-il de cette étrange distribution de contenu ici dans nos éléments de liste? 90 00:07:08,170 --> 00:07:15,070 Eh bien, vous remarquerez que les éléments de la liste eux-mêmes sont plus gros qu'auparavant. 91 00:07:15,160 --> 00:07:21,010 Le contenu est distribué comme si l'élément de liste se terminait ici et c'est effectivement le problème. 92 00:07:21,010 --> 00:07:27,910 Nous avons une largeur de 60% de l'élément de liste et notre contenu respecte cela, mais nos frontières ne 93 00:07:27,910 --> 00:07:29,510 le sont étrangement pas. 94 00:07:29,590 --> 00:07:34,870 Pour corriger ce comportement étrange de FlatList, vous pouvez aller dans votre conteneur de liste qui contient 95 00:07:34,870 --> 00:07:41,110 la liste globale et y définir la largeur à la largeur de liste souhaitée à la fin, comme disons 60% 96 00:07:41,860 --> 00:07:45,810 et donner à vos éléments de liste une largeur de 100%. 97 00:07:45,820 --> 00:07:52,300 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 98 00:07:52,300 --> 00:07:53,850 même largeur et puisque vous 99 00:07:53,950 --> 00:07:58,840 devez rarement utiliser le cas où votre conteneur de liste doit être plus large que les éléments 100 00:07:59,230 --> 00:08:04,150 de liste, car quoi d'autre serait là-bas dans le conteneur de liste, cela devrait être une bonne solution. 101 00:08:04,180 --> 00:08:11,300 Maintenant, si vous faites cela, vous remarquerez que la largeur est meilleure, mais en fait, le positionnement est maintenant un problème. 102 00:08:11,320 --> 00:08:17,080 Eh bien, puisque nous avons maintenant la largeur contrôlée sur le conteneur de liste extérieur, nous pouvons nous 103 00:08:17,080 --> 00:08:20,740 débarrasser d'aligner les éléments au centre ici sur la liste elle-même, 104 00:08:20,740 --> 00:08:25,760 donc la liste, n'oubliez pas, a été le style ajouté au style de conteneur de contenu. 105 00:08:25,810 --> 00:08:30,810 Nous conservons le style mais j'ai supprimé aligner les éléments au centre car il n'y a plus 106 00:08:31,060 --> 00:08:35,050 rien à centrer maintenant, la largeur est définie sur le conteneur de liste 107 00:08:35,050 --> 00:08:41,890 et non sur les éléments de la liste, donc grâce à eux à 100%, ils sont centrés automatiquement car ils prennent de 108 00:08:41,890 --> 00:08:45,070 toute façon sur toute la largeur et donc maintenant 109 00:08:45,070 --> 00:08:52,420 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. 110 00:08:52,420 --> 00:08:57,940 Donc, si nous en avons un autre ici qui peut prendre un peu plus de temps, oui, en regardant 111 00:08:57,940 --> 00:09:04,230 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é 112 00:09:04,240 --> 00:09:09,760 autour de ce comportement différent que FlatList nous donne. Essayons également ceci sur Android ici et commençons un 113 00:09:09,760 --> 00:09:10,930 nouveau jeu là-bas, oh 114 00:09:12,670 --> 00:09:14,290 ce ne sera pas un jeu 115 00:09:16,120 --> 00:09:17,020 long, assez 116 00:09:17,020 --> 00:09:19,800 long, donc là aussi, tout fonctionne comme il se doit. 117 00:09:19,960 --> 00:09:25,780 Et voici comment vous pouvez le faire avec FlatList, comme vous le voyez fonctionne un peu différemment, nous devons 118 00:09:25,780 --> 00:09:27,600 contourner son comportement différent là-bas quand 119 00:09:27,610 --> 00:09:33,550 il s'agit d'ajuster la largeur des éléments de la liste, mais en fin de compte, cela fonctionne maintenant et par 120 00:09:34,090 --> 00:09:40,330 conséquent, vous avez maintenant appris à disposer vos objets avec FlatList, avec la vue de défilement, ce qui est spécial à 121 00:09:40,330 --> 00:09:46,990 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 122 00:09:46,990 --> 00:09:47,970 vous le souhaitez.