Maintenant, avant d'ajouter plus de logique, travaillons sur l'interface utilisateur, donc sur ce que nous produisons.
Donc ici, je vais retourner une vue
à la fin et dans cette vue, je veux avoir un texte où je dis que les adversaires devinent, donc ce que l'ordinateur a deviné et ensuite nous pouvons
réutiliser le conteneur de numéros pour bien présenter ce numéro deviné.
C'est donc un énorme avantage d'avoir de tels composants réutilisables parce que vous pouvez les réutiliser, je suppose, c'est donc
ce que nous faisons ici.
Nous utiliserons à nouveau ce conteneur de numéros, en dessous du texte que les adversaires devineront ici pour avoir notre
propre conteneur de numéros et afficherons bien
la supposition actuelle ici. La supposition actuelle est notre
état, rappelez-vous que c'est ce que nous initialisons ici et ce que nous pourrons bientôt changer également.
C'est donc ce qui est produit ici, ci-dessous, nous pouvons maintenant également présenter notre carte avec deux boutons qui permettent à l'utilisateur de
donner un indice à l'ordinateur.
Donc ici, je vais importer la carte de la carte des composants pour envelopper ces boutons là-dedans et donc, nous pouvons déjà
aussi importer le bouton de React Native parce que nous en aurons
besoin dans une seconde aussi et ensuite simplement avoir notre carte ici et dans cette carte , Je veux avoir un bouton avec un titre inférieur
et un autre bouton où nous disons supérieur, ce sont deux directions dans lesquelles nous pouvons donner un indice, tout comme
le nombre que vous avez deviné trop
faible, est trop élevé, alors nous pouvons donner le ordinateur un indice avec ces boutons et onPress, je vais pour
l'instant enregistrer une fonction vide qui ne fait rien, qui changera bien
sûr bientôt et générera effectivement un nouveau nombre aléatoire et avec cela, il est maintenant temps d'ajouter certains styles ici.
Je veux avoir un style pour mon écran général et comme auparavant, cela en
donnera un pour prendre tout l'espace disponible sur l'écran sous l'en-tête que
nous avons en haut, ajoutez un rembourrage de 10 pour avoir un peu d'espace
autour du contenu afin qu'il ne repose pas directement sur les bords et utilise également les éléments d'alignement ici pour centrer notre contenu horizontalement et que la propriété screen
soit utilisée sur la vue environnante ici pour ajouter des styles d'écran là-bas afin que le
contenu de cet écran global soit bien positionné. Maintenant, pour ces boutons, ce serait bien qu'ils soient assis côte à
côte, donc sur la carte, nous pouvons ajouter un style, peut-être utiliser le conteneur de boutons comme nom ici et donc ajouter ce même nom
ici dans notre feuille de style parce que c'est ce que nous faisons référence
et définissons la direction de flex ici pour ramer et nous pouvons définir une direction de flex ici parce que je fais cela sur
ma carte,
mais si nous regardons, dans cette carte, nous distribuons ces styles sur une vue et un La vue utilise Flexbox pour que nous
puissions définir une direction de flex ici et c'est ce que je fais là, en définissant la direction de
flex sur la ligne pour positionner les éléments côte à côte horizontalement. justifierContenu avec un espace autour peut-être, pour avoir l'espace
libre autour des boutons, à gauche et à droite également répartis et ajouter également une marge en haut de 20 afin que cette carte
avec nos boutons ne se trouve pas directement à côté du nombre deviné, mais il y a un certain espacement entre les
deux et peut-être aussi lui donner une largeur de 300 et une largeur maximale de 80% pour vous assurer que
cela ne peut jamais dépasser les limites de la vue parent. Maintenant, si nous sauvegardons cela, ce serait bien de voir cela
et pour cela, nous avons besoin d'un moyen d'accéder à l'écran de jeu.
Maintenant, nous utilisons l'écran de démarrage du jeu dans le composant de l'application, nous devons donc également utiliser l'écran
de jeu et gérer le numéro sélectionné dans ce composant de l'application, car c'est le seul composant qui est
constamment affiché à l'écran, en plus
de l'en-tête, mais le composant de l'application est également le composant qui contiendra bientôt l'écran de démarrage et
l'écran de jeu.C'est donc
le composant où nous pouvons également transmettre des données à l'écran de démarrage et à
l'écran de jeu.
Importons donc l'écran de jeu ici à partir de l'écran de jeu des écrans et bien sûr, je veux rendre mon écran de jeu ici, mais pas si
l'écran de démarrage du jeu est toujours visible, je veux avoir l'une des deux et une note latérale, il y
a aussi un totalement manière différente de charger différents composants et nous allons nous y
plonger dans un module séparé dans le module de navigation.
Maintenant, alors que nous couvrirons différentes solutions de navigation plus tard, il existe un moyen de rendre l'un des deux
écrans en ce moment, nous avons
également un moyen de rendre uniquement l'un de ces deux écrans en ce moment déjà et pour
cela, nous n'avons besoin d'aucun outil spécial ou quelque
chose comme ça, nous pouvons utiliser la logique React normale, nous pouvons rendre ce contenu conditionnellement.
Tout ce que nous devons faire pour cela, c'est que nous devons gérer un
état dans notre composant d'application, nous devons également gérer le numéro sélectionné ici.
Je vais donc ajouter l'état d'utilisation ici, puis simplement utiliser mon état ici et l'initialiser sans valeur à la fin et là, je veux obtenir le
numéro
sélectionné ou le numéro d'utilisateur et avoir défini le numéro d'utilisateur comme fonction de mise à jour ici et initialement c'est indéfini et maintenant
j'ai besoin d'une
fonction où nous pouvons changer
cela, comme le gestionnaire de jeu, qui
ressemble à
un nom approprié
parce que nous aurons un tel nombre si l'utilisateur appuie sur le bouton de démarrage du jeu ici
dans l'écran de démarrage du jeu.
Ainsi, le gestionnaire de démarrage du jeu obtiendra alors le numéro sélectionné en entrée, c'est une hypothèse que nous
devons faire ici et définir le numéro d'utilisateur comme étant ce numéro sélectionné ici. Maintenant, chaque fois que c'est le cas, chaque fois que nous
avons un numéro d'utilisateur, nous savons que le jeu est en cours d'exécution et nous savons
que nous pouvons rendre l'écran du jeu au lieu de l'écran de démarrage du jeu.
Donc, ici, nous pouvons utiliser une variable de contenu par exemple et dire que notre contenu par défaut est l'écran de démarrage du jeu et
que c'est
du code React normal tel que vous le connaissez depuis React For Web aussi, vous pouvez stocker des composants comme celui-ci dans des variables,
puis simplement sortir la variable vers le bas là, c'est aussi ce que nous
faisons déjà dans l'écran de démarrage du jeu avec la sortie confirmée. Donc, l'écran de démarrage des jeux est notre sortie par
défaut, mais
maintenant nous pouvons ajouter une vérification if et vérifier si le contenu est true-ish,
c'est ce que cette vérification vérifie, donc ce sera false-ish au départ si ce n'est
pas défini mais maintenant si c'est vrai, nous peut définir le numéro d'utilisateur, j'ai donc vérifié si le numéro d'utilisateur est
true-ish, si c'est true-ish, alors
nous savons qu'un nombre a été sélectionné, il sera indéfini et donc faux initialement, mais s'il est vrai-ish, si
un numéro a été
choisi, puis nous définirons le contenu ici comme écran de jeu, puis nous rendrons tout ce qui se trouve dans le
contenu là-bas et ce sera soit l'écran de jeu, soit l'écran de démarrage du jeu.
Alors maintenant, lorsque nous cliquons sur le démarrage du jeu ici avec un autre choisi, cela devrait changer ici si et c'est la chose importante, si
nous nous assurons que le gestionnaire
de démarrage du jeu peut être déclenché depuis l'intérieur de l'écran de démarrage du jeu. Maintenant, pour cela, nous utilisons un modèle React
par défaut de transmission d'une référence à ce gestionnaire à ce composant, peut-être sur l'accessoire onStartGame, qui ressemble
à un nom approprié pour moi. Nous transférons le gestionnaire de démarrage du
jeu, juste la référence sans parenthèses ici, juste une référence, un pointeur sur cette fonction et onStartGame est
maintenant une propriété que nous pouvons utiliser dans l'écran de démarrage du jeu.
Donc ici dans l'écran de démarrage du jeu, lorsque nous cliquons sur le bouton de démarrage du jeu ici, je veux déclencher cet accessoire à
la fin.
Donc ici, j'ai onPress et là à la fin, je veux exécuter onStartGame et transférer le numéro actuellement sélectionné ici qui
est géré dans l'écran de démarrage du jeu.
Donc ici, je transmets ceci à onStartGame et onStartGame est lié au gestionnaire de début de jeu qui
attend et reçoit ensuite ce numéro sélectionné.
C'est ainsi que nous nous assurons que cliquer sur ce bouton pour démarrer l'écran de jeu déclenche cette méthode ou cette fonction ici et
lorsque cette fonction
est déclenchée, nous définissons le numéro d'utilisateur, cela garantit que le contenu
est l'écran de jeu et donc nous devrions voir l'écran de jeu. Maintenant, une pièce manquante est que dans
l'écran de jeu, j'ai besoin du choix de l'utilisateur pour générer mon nombre aléatoire initial et exclure ce choix
des utilisateurs correctement pour ce premier nombre aléatoire et donc nous devons transmettre une
propriété nommée choix d'utilisateur à l'écran de jeu. Nous pouvons donc ajouter l'accessoire de choix de l'utilisateur
ici et transmettre le numéro d'utilisateur qui est l'état que nous gérons dans le composant d'application qui
est le numéro sélectionné que nous stockons dans l'état ici,
le transmettre à l'écran de jeu.
J'espère donc que le flux de données est clair, nous obtenons ce numéro sélectionné à partir de l'écran de démarrage du jeu lorsque ce bouton,
le bouton de démarrage du jeu est enfoncé, nous le
stockons ensuite dans l'état du composant d'application ici dans l'état du numéro d'utilisation avec le l'aide de définir le
numéro d'utilisateur et nous utilisons ensuite ce numéro d'utilisateur pour le transmettre à l'écran de jeu qui n'est rendu que si nous
avons un numéro d'utilisateur, donc si le jeu est en cours d'exécution, si le jeu a été démarré de sorte
que dans l'écran de jeu, nous pouvons utiliser le numéro d'utilisateur qui est reçu sur l'accessoire de choix d'utilisateur pour générer ensuite le
nouveau numéro aléatoire que l'ordinateur a deviné où ce choix d'utilisateur, ce numéro d'utilisateur est exclu, de sorte que pour la toute première
estimation de l'ordinateur, l'ordinateur ne peut pas devinez instantanément le numéro de l'utilisateur. Beaucoup de discussions, gardons tout cela et jetons
un coup d'œil.
Entrons 55 et confirmons et cliquez sur démarrer le jeu et nous ne pouvons pas trouver une variable au début du jeu.
Donc, le problème ici est que j'exécute, oui, cela devrait être des accessoires pour démarrer le jeu ici, sur le bouton de
démarrage du jeu dans le composant de démarrage du jeu car bien sûr, c'est une propriété que
nous
obtenons, ce n'est pas une
fonction définie ici, elle est définie
sur les accessoires, c'est cet accessoire à la fin.
Donc petite erreur, réessayons après avoir
corrigé cela, cliquez sur démarrer le jeu
et ça a l'air bien.
Maintenant, nous voyons
les adversaires deviner et nous pouvons donner
ici des indices qui n'ont actuellement aucun effet mais qui auront bientôt un effet et donc nous sommes sur l'écran suivant, nous
sommes dans l'écran de jeu.
Maintenant, assurons-nous que nous pouvons donner quelques conseils à l'ordinateur ici et nous assurer que l'ordinateur a une chance
de résoudre ce problème et de deviner notre nombre.