1 00:00:02,200 --> 00:00:06,380 Nous avons donc passé beaucoup de temps sur ce premier écran, mais évidemment pour une bonne raison, 2 00:00:06,400 --> 00:00:11,950 ce cours concerne l'apprentissage de React Native après tout et vous avez beaucoup appris sur la mise en page, le style, la connexion 3 00:00:11,980 --> 00:00:16,810 de composants, l'utilisation de plusieurs composants et la configuration de composants intégrés déjà et c'est un élément central de React 4 00:00:16,810 --> 00:00:23,920 Native et ce qui vous permet de créer de vraies applications à la fin. Néanmoins, il est maintenant temps de continuer à travailler sur cette 5 00:00:23,920 --> 00:00:26,840 application et avant de nous plonger plus profondément dans 6 00:00:27,190 --> 00:00:31,630 d'autres choses que nous pourrions styliser, ce que je ferai plus tard, je veux 7 00:00:31,840 --> 00:00:36,640 m'assurer que ce bouton de démarrage du jeu fonctionne parce qu'en ce moment nous sommes 8 00:00:36,640 --> 00:00:43,030 toujours coincés sur ce démarrer l'écran du jeu, mais maintenant, je vais ajouter un deuxième composant dans le dossier screens, l'écran 9 00:00:43,210 --> 00:00:49,390 du jeu lui-même, donc l'écran, le contenu que je veux afficher à l'écran lorsque le jeu est en cours et 10 00:00:49,390 --> 00:00:54,940 c'est l'écran qui est responsable de montrer la conjecture de l'ordinateur et permettre à l'utilisateur de dire à 11 00:00:54,940 --> 00:00:58,780 l'ordinateur si c'est bien ou mal, si la valeur doit être inférieure 12 00:00:58,930 --> 00:01:01,070 ou supérieure, c'est donc l'objectif ici. 13 00:01:01,120 --> 00:01:04,660 Maintenant, comme je l'ai déjà mentionné, c'est un composant régulier néanmoins, 14 00:01:04,660 --> 00:01:11,620 nous devons donc importer React à coup sûr et nous allons également importer des éléments de React Native, le plus important bien 15 00:01:12,010 --> 00:01:17,640 sûr, la vue et le texte, vous ne pouvez jamais vous tromper avec ceux-ci, aussi la feuille de 16 00:01:17,650 --> 00:01:20,260 style bien sûr, vous en avez toujours besoin. 17 00:01:20,590 --> 00:01:28,150 Ensuite, ici, nous pouvons ajouter notre composant fonctionnel d'écran de jeu, créer l'objet 18 00:01:28,150 --> 00:01:38,310 styles ici en utilisant la feuille de style. créer comme ça et à la fin, exporter notre écran de jeu ici par défaut et se 19 00:01:38,310 --> 00:01:40,790 débarrasser de cela plus ici en haut. 20 00:01:40,800 --> 00:01:45,340 Alors maintenant, nous avons ce composant d'écran de jeu défini ici 21 00:01:45,370 --> 00:01:49,980 et maintenant, arrêtons-nous brièvement et réfléchissons à ce qui doit se produire ici. 22 00:01:50,190 --> 00:01:55,620 Maintenant, à la fin, ce qui doit arriver, c'est que l'ordinateur doit faire une supposition et 23 00:01:55,620 --> 00:01:56,460 qu'il doit faire 24 00:01:56,520 --> 00:02:04,400 une supposition initialement lorsque cet écran se charge pour la première fois, mais aussi chaque fois que l'utilisateur appuie sur le bouton ceci est 25 00:02:04,410 --> 00:02:05,230 trop 26 00:02:05,310 --> 00:02:07,020 bas ou trop haut, donc 27 00:02:07,020 --> 00:02:13,460 chaque fois que l'utilisateur donne un indice pour savoir si cette supposition est, dans quelle direction du nombre réel cette 28 00:02:13,490 --> 00:02:18,990 supposition est pour ainsi dire, chaque fois que cela se produit, nous voulons générer une nouvelle supposition. 29 00:02:19,080 --> 00:02:27,240 Maintenant, la supposition elle-même devrait être un nombre aléatoire et donc, je vais commencer par créer une nouvelle fonction en dehors de mon 30 00:02:27,360 --> 00:02:28,740 composant fonctionnel maintenant 31 00:02:28,740 --> 00:02:35,700 car elle n'utilisera aucune donnée de là-bas, donc elle ne devrait pas être recréée à chaque nouveau rendu des 32 00:02:35,700 --> 00:02:38,190 composants simplement pour économiser des performances, si 33 00:02:38,250 --> 00:02:44,820 vous ne comptez pas sur les accessoires ou l'état, vous pouvez également simplement avoir une fonction qui réside 34 00:02:44,820 --> 00:02:48,210 en dehors de votre composant et je nommerai ceci générer 35 00:02:51,000 --> 00:02:52,770 aléatoirement entre parce que 36 00:02:52,770 --> 00:02:54,920 c'est ce que cette fonction fera. 37 00:02:54,930 --> 00:03:00,360 C'est une fonction, elle va générer un nombre aléatoire entre un minimum et un maximum 38 00:03:00,360 --> 00:03:02,010 et qui nous permet 39 00:03:02,070 --> 00:03:09,510 également d'exclure certains nombres, par exemple le premier nombre que nous générons devrait exclure la solution pour que l'appareil, l'application 40 00:03:09,510 --> 00:03:14,010 ne puisse jamais deviner le choix de l'utilisateur du premier coup. 41 00:03:14,010 --> 00:03:21,210 Maintenant, ici, le minimum sera normalisé en mathématiques. ceil minimum, donc pour avoir fondamentalement 42 00:03:21,210 --> 00:03:31,160 un nombre entier ici si un non-entier est entré et l'arrondir et max sera plancher pour faire la 43 00:03:31,160 --> 00:03:45,920 même chose mais arrondi vers le bas. Ensuite, je vais avoir mon nombre aléatoire que je génère avec Math. aléatoire et Math. 44 00:03:45,930 --> 00:03:54,470 random nous donne un nombre aléatoire entre 0 et 1, donc pour avoir un nombre entre min et max, nous devons multiplier cela par max - 45 00:03:54,970 --> 00:04:05,880 min et puis aussi à la fin, ajoutez min ici ici mais assurez-vous également d'appeler Math. plancher sur le résultat de toute cette opération ici et cela vous donnera 46 00:04:05,880 --> 00:04:10,410 un nombre aléatoire entre ce minimum et ce maximum. 47 00:04:13,340 --> 00:04:14,620 Maintenant, avec cela 48 00:04:14,630 --> 00:04:20,750 généré, je veux vérifier si le nombre aléatoire est égal au nombre que nous voulons exclure, ce qui serait bien 49 00:04:20,750 --> 00:04:28,200 sûr une coïncidence très rare mais cela peut arriver, auquel cas je retournerai le résultat d'une autre génération aléatoire entre appeler où je transmets simplement 50 00:04:28,200 --> 00:04:33,300 min, max et exclure ce que nous avons obtenu, donc je vais simplement répéter générer aléatoirement entre 51 00:04:33,300 --> 00:04:39,440 et retourner la valeur de cette exécution répétée si nous y obtenons à nouveau la valeur exclue, nous le répéterons une 52 00:04:39,460 --> 00:04:43,700 fois de plus, donc finalement nous 'y arriverai et si nous n'avons pas le 53 00:04:43,920 --> 00:04:49,140 nombre exclu, ce qui devrait être le cas dans la plupart des cas, alors je vais tout 54 00:04:49,140 --> 00:04:51,030 de suite retourner ce nombre aléatoire. 55 00:04:51,030 --> 00:04:55,940 C'est donc maintenant une fonction qui nous génère un nombre aléatoire. 56 00:04:56,050 --> 00:05:06,070 Maintenant, ici, dans l'écran de jeu, je veux gérer un état, je vais donc importer le crochet useState de React et initialiser un état ici avec le 57 00:05:06,700 --> 00:05:12,040 nombre aléatoire parce que l'état que je veux gérer ici est la conjecture de 58 00:05:12,040 --> 00:05:15,400 l'ordinateur, le courant suppose et qui a également 59 00:05:15,490 --> 00:05:21,640 besoin d'une fonction de définition actuelle pour que nous puissions changer cela chaque fois que l'utilisateur donne 60 00:05:21,640 --> 00:05:22,900 un nouvel indice. 61 00:05:22,900 --> 00:05:29,410 Donc, ici, nous pouvons appeler générer aléatoirement entre pour générer un état initial qui sera enregistré et cela ne sera alors 62 00:05:29,410 --> 00:05:31,990 considéré que comme un état initial, donc 63 00:05:31,990 --> 00:05:37,540 lorsque ce composant reconstruit et donc utiliser l'état est appelé à nouveau, nous générerons un autre nombre 64 00:05:37,540 --> 00:05:43,810 aléatoire à nouveau, mais cela ne remplacera pas cet état car une fois que l'état est défini initialement, il 65 00:05:43,810 --> 00:05:47,560 ne sera pas remplacé à nouveau en ajoutant une valeur dérivée ici. 66 00:05:47,570 --> 00:05:54,190 Cela ne sera pris en compte par React que si nous n'avons pas encore d'état initial, par la suite cet état 67 00:05:54,190 --> 00:06:00,400 initial ou mis à jour sera géré séparément du composant et ne sera plus remplacé par cet appel ici. 68 00:06:00,400 --> 00:06:05,640 Au départ, cependant, nous devons faire cet appel, nous voulons obtenir un nombre aléatoire entre 1 et 69 00:06:05,650 --> 00:06:08,170 100, 100 est exclu avec la logique 70 00:06:08,200 --> 00:06:12,700 que nous avons écrite là-bas, donc ce sera un nombre entre 1 et 99, 99 71 00:06:12,790 --> 00:06:15,580 inclus et je veux exclure le choix de l'utilisateur. 72 00:06:16,210 --> 00:06:19,040 Je m'attends à avoir ceci sur mes accessoires ici, donc le 73 00:06:19,150 --> 00:06:25,480 choix de l'utilisateur pourrait être un nom d'accessoire que nous utilisons ici et c'est la valeur que je veux exécuter parce que c'est la solution 74 00:06:25,480 --> 00:06:26,350 à la 75 00:06:26,440 --> 00:06:30,310 fin et nous ne serons pas en mesure de deviner la solution tout de suite, 76 00:06:30,310 --> 00:06:31,480 ce serait un peu injuste.