1 00:00:02,220 --> 00:00:04,630 Alors maintenant que nous avons un en-tête, 2 00:00:04,650 --> 00:00:10,950 nous pouvons continuer et continuer avec la partie où les utilisateurs peuvent entrer un nombre que l'ordinateur devrait 3 00:00:10,950 --> 00:00:15,920 deviner par la suite. Et pour cela ici dans l'application. fichier js, sous l'en-tête, 4 00:00:15,920 --> 00:00:22,790 je veux bien sûr avoir la zone de saisie de l'utilisateur. Maintenant, comme auparavant, je vais gérer cela 5 00:00:22,790 --> 00:00:29,780 dans un composant séparé et non ici dans l'application. js pour garder tous les composants relativement maigres et nous pourrions 6 00:00:29,780 --> 00:00:34,850 créer ce composant ici dans le dossier des composants, ce ne serait pas faux mais puisque 7 00:00:34,850 --> 00:00:42,110 je vais maintenant travailler sur un composant qui est essentiellement responsable de tout ce que nous voyons à l'écran en plus de l'en-tête, je 8 00:00:42,140 --> 00:00:47,600 traite ce composant comme une sorte de composant spécial, je le nommerai un écran et je le stockerai 9 00:00:47,600 --> 00:00:53,000 dans un dossier screens car le jeu fini aura essentiellement trois écrans différents - un pour configurer 10 00:00:53,000 --> 00:00:58,040 et démarrer le jeu, un lorsque le jeu est en cours d'exécution et un lorsque le 11 00:00:58,100 --> 00:01:04,520 jeu est terminé et je veux avoir ces composants spéciaux qui sont techniquement des composants totalement normaux mais qui remplissent un 12 00:01:04,730 --> 00:01:10,790 objectif spécial, je veux les avoir stockés dans un dossier séparé et c'est juste ma décision de conception personnelle 13 00:01:10,790 --> 00:01:16,790 ici, vous ne pas besoin de les stocker. Techniquement, il n'y a aucune raison de le faire ou de ne pas 14 00:01:16,790 --> 00:01:18,750 le faire, React Native s'en fiche tout simplement. 15 00:01:18,770 --> 00:01:24,200 Alors ici, je vais le stocker là-bas et je nommerai ce StartGameScreen. js pour aussi dire clairement dans le 16 00:01:24,200 --> 00:01:30,740 nom que c'est un composant spécial pour moi mais comme je l'ai dit, techniquement c'est un composant normal et donc 17 00:01:30,770 --> 00:01:37,580 nous importons React de React et nous allons aussi importer des choses de React Native bien sûr et nous peut 18 00:01:37,880 --> 00:01:44,210 déjà dire que nous aurons certainement besoin d'une vue car vous ne pouvez probablement pas construire de composant, eh 19 00:01:44,210 --> 00:01:49,060 bien vous pouvez mais pas autant de composants que vous pouvez construire sans vues. 20 00:01:49,160 --> 00:01:54,620 Nous allons donc importer la vue ici et nous aurons certainement besoin d'une feuille de style pour un certain style et nous verrons 21 00:01:54,620 --> 00:02:02,870 ce dont nous avons besoin, nous aurons certainement besoin d'un texte pour que nous puissions déjà l'ajouter. Maintenant, avec cela, je vais créer une nouvelle 22 00:02:03,500 --> 00:02:10,130 constante ici, démarrer l'écran de jeu qui est un composant fonctionnel ressemblant à ceci, 23 00:02:10,130 --> 00:02:19,330 où nous aurons un objet styles avec Feuille de style. créer, comme ça et où j'exporte ensuite l'écran de démarrage du jeu comme ça et 24 00:02:19,450 --> 00:02:27,430 vous pouvez l'enregistrer comme une sorte de modèle pour tout nouveau composant que vous ajoutez parce que 90% des composants personnalisés que vous construisez dans React Native 25 00:02:27,430 --> 00:02:32,890 ressemblent essentiellement à ceci, vous importez React, vous importez des éléments de React Native, vous définissez votre composant, 26 00:02:32,890 --> 00:02:39,280 le nom diffère bien sûr, vous avez votre objet styles et vous l'exportez, c'est à peu près toujours le même afin que 27 00:02:39,310 --> 00:02:40,740 vous puissiez en quelque 28 00:02:40,780 --> 00:02:46,740 sorte l'enregistrer en tant que modèle si vous le souhaitez. Je ne veux pas ici cependant, alors je 29 00:02:46,740 --> 00:02:52,800 vais continuer à travailler sur le composant lui-même et la question est maintenant, que rendons-nous 30 00:02:52,800 --> 00:02:59,760 dans cet écran de démarrage? À quoi devrait-il ressembler? En fin de compte, j'aurai 31 00:02:59,760 --> 00:03:06,960 une vue enveloppante autour de tout mon écran parce que je pense que cela a du 32 00:03:06,960 --> 00:03:14,040 sens, nous permet de configurer un style général. Je vais à nouveau ajouter une propriété d'écran ici à cet objet de feuille de style que 33 00:03:14,040 --> 00:03:18,420 je peux faire, il ne heurtera pas celui de l'application. js, on aurait pu aussi choisir 34 00:03:18,420 --> 00:03:23,760 des noms différents, ces deux-là ne sont tout simplement pas liés car ce sont des objets 35 00:03:23,760 --> 00:03:29,790 Javascript indépendants au final gérés dans des fichiers indépendants. Donc, nous pouvons répéter les noms ici ou choisir des noms différents, je vais choisir 36 00:03:29,790 --> 00:03:36,390 un nom similaire ici, nommer cet écran et configurer un style général pour cette vue environnante ici. Le style général est que j'ai dit ceci pour en fléchir 37 00:03:36,390 --> 00:03:42,810 un afin qu'il prenne tout l'espace qu'il peut obtenir, ce qui signifie que puisque je l'ajouterai en dessous de l'en-tête, il prendra 38 00:03:42,810 --> 00:03:47,760 tout l'espace en dessous de l'en-tête, à la fois verticalement et horizontalement et en plus de 39 00:03:48,780 --> 00:03:55,350 cela , Je veux également ajouter un rembourrage ici de 10 afin que le contenu ne se trouve pas directement sur les 40 00:03:55,350 --> 00:04:01,470 bords de cet écran, mais qu'il y ait un certain espacement à gauche, à droite, en haut et en bas 41 00:04:01,470 --> 00:04:03,860 et j'ajouterai les éléments d'alignement au centre. 42 00:04:03,930 --> 00:04:09,900 Gardez à l'esprit que chaque vue utilise par défaut flexbox et par défaut utilise la colonne de direction 43 00:04:09,930 --> 00:04:13,960 flexible, alignez les éléments, elle positionne les éléments le long de l'axe 44 00:04:13,980 --> 00:04:18,240 transversal, donc comme la direction par défaut est la colonne, l'axe transversal est 45 00:04:18,240 --> 00:04:20,000 de gauche à droite, 46 00:04:20,070 --> 00:04:25,380 donc c'est un axe horizontal, donc cela alignera les éléments au centre horizontalement mais pas verticalement. 47 00:04:25,380 --> 00:04:31,200 Là, nous utilisons la valeur par défaut de justificationContent flex start mais comme j'utilise la 48 00:04:31,200 --> 00:04:39,210 valeur par défaut, je n'ai pas besoin de la définir. Nous allons donc simplement le laisser tel qu'il est ici et maintenant affecter ce style ici à cette vue et la mise en forme 49 00:04:39,210 --> 00:04:41,600 automatique a fermé ma balise ici, ce que je ne veux bien sûr pas faire, 50 00:04:41,760 --> 00:04:42,830 alors permettez-moi de revenir en 51 00:04:43,140 --> 00:04:47,070 arrière et maintenant nous avons cette vue pour notre écran de jeu. Maintenant, pour voir si cela fonctionne, 52 00:04:47,070 --> 00:04:49,220 je vais simplement afficher du texte ici, 53 00:04:49,320 --> 00:04:56,110 l'écran de jeu, juste un espace réservé factice. Reformatez cela et maintenant dans l'application. js, utilisons 54 00:04:56,530 --> 00:05:05,880 cet écran en important l'écran de démarrage des jeux à partir du dossier 55 00:05:05,880 --> 00:05:09,820 screens et là, lancez l'écran de 56 00:05:09,890 --> 00:05:19,580 jeu, puis ajoutez-le simplement ici, comme ceci. Si nous enregistrons cela, nous voyons l'écran de jeu ici et aussi sur Android, donc cela 57 00:05:19,650 --> 00:05:20,250 fonctionne. 58 00:05:20,250 --> 00:05:27,270 Nous utilisons ce deuxième composant distinct que nous allons maintenant utiliser comme composant plein écran, essentiellement ou presque en plein 59 00:05:27,360 --> 00:05:28,420 écran, la 60 00:05:28,430 --> 00:05:30,420 partie sous l'en-tête à la fin.