Alors maintenant que nous avons un en-tête,
nous pouvons continuer et continuer avec la partie où les utilisateurs peuvent entrer un nombre que l'ordinateur devrait
deviner par la suite. Et pour cela ici dans l'application. fichier js, sous l'en-tête,
je veux bien sûr avoir la zone de saisie de l'utilisateur. Maintenant, comme auparavant, je vais gérer cela
dans un composant séparé et non ici dans l'application. js pour garder tous les composants relativement maigres et nous pourrions
créer ce composant ici dans le dossier des composants, ce ne serait pas faux mais puisque
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
traite ce composant comme une sorte de composant spécial, je le nommerai un écran et je le stockerai
dans un dossier screens car le jeu fini aura essentiellement trois écrans différents - un pour configurer
et démarrer le jeu, un lorsque le jeu est en cours d'exécution et un lorsque le
jeu est terminé et je veux avoir ces composants spéciaux qui sont techniquement des composants totalement normaux mais qui remplissent un
objectif spécial, je veux les avoir stockés dans un dossier séparé et c'est juste ma décision de conception personnelle
ici, vous ne pas besoin de les stocker. Techniquement, il n'y a aucune raison de le faire ou de ne pas
le faire, React Native s'en fiche tout simplement.
Alors ici, je vais le stocker là-bas et je nommerai ce StartGameScreen. js pour aussi dire clairement dans le
nom que c'est un composant spécial pour moi mais comme je l'ai dit, techniquement c'est un composant normal et donc
nous importons React de React et nous allons aussi importer des choses de React Native bien sûr et nous peut
déjà dire que nous aurons certainement besoin d'une vue car vous ne pouvez probablement pas construire de composant, eh
bien vous pouvez mais pas autant de composants que vous pouvez construire sans vues.
Nous allons donc importer la vue ici et nous aurons certainement besoin d'une feuille de style pour un certain style et nous verrons
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
constante ici, démarrer l'écran de jeu qui est un composant fonctionnel ressemblant à ceci,
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
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
ressemblent essentiellement à ceci, vous importez React, vous importez des éléments de React Native, vous définissez votre composant,
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
vous puissiez en quelque
sorte l'enregistrer en tant que modèle si vous le souhaitez. Je ne veux pas ici cependant, alors je
vais continuer à travailler sur le composant lui-même et la question est maintenant, que rendons-nous
dans cet écran de démarrage? À quoi devrait-il ressembler? En fin de compte, j'aurai
une vue enveloppante autour de tout mon écran parce que je pense que cela a du
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
je peux faire, il ne heurtera pas celui de l'application. js, on aurait pu aussi choisir
des noms différents, ces deux-là ne sont tout simplement pas liés car ce sont des objets
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
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
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
tout l'espace en dessous de l'en-tête, à la fois verticalement et horizontalement et en plus de
cela , Je veux également ajouter un rembourrage ici de 10 afin que le contenu ne se trouve pas directement sur les
bords de cet écran, mais qu'il y ait un certain espacement à gauche, à droite, en haut et en bas
et j'ajouterai les éléments d'alignement au centre.
Gardez à l'esprit que chaque vue utilise par défaut flexbox et par défaut utilise la colonne de direction
flexible, alignez les éléments, elle positionne les éléments le long de l'axe
transversal, donc comme la direction par défaut est la colonne, l'axe transversal est
de gauche à droite,
donc c'est un axe horizontal, donc cela alignera les éléments au centre horizontalement mais pas verticalement.
Là, nous utilisons la valeur par défaut de justificationContent flex start mais comme j'utilise la
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
automatique a fermé ma balise ici, ce que je ne veux bien sûr pas faire,
alors permettez-moi de revenir en
arrière et maintenant nous avons cette vue pour notre écran de jeu. Maintenant, pour voir si cela fonctionne,
je vais simplement afficher du texte ici,
l'écran de jeu, juste un espace réservé factice. Reformatez cela et maintenant dans l'application. js, utilisons
cet écran en important l'écran de démarrage des jeux à partir du dossier
screens et là, lancez l'écran de
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
fonctionne.
Nous utilisons ce deuxième composant distinct que nous allons maintenant utiliser comme composant plein écran, essentiellement ou presque en plein
écran, la
partie sous l'en-tête à la fin.