C'est bien sûr à vous de décider comment vous voulez styler ce texte de confirmation ici ou en fait ne
devrait pas être simplement du texte, ce devrait être une vue avec le texte là-dedans qui sort notre numéro et ensuite un bouton pour démarrer
le jeu et vous pouvez certainement faire une pause la vidéo à ce stade et créez votre propre style là-bas, votre
propre mise en page.
J'ai une certaine disposition en tête qui différera certainement de la vôtre, mais il n'y a
pas de mauvaise ou de bonne décision ici, alors prenez certainement cela comme une autre chance de trouver votre
propre disposition pour cela et un bouton qui ne fait rien pour le moment mais c'est là
qui permettrait à l'utilisateur de démarrer le jeu et après une courte pause que vous pouvez utiliser pour mettre la vidéo
en pause, je mettrai en œuvre ma solution avec vous.
Voici donc comment je pense que cela aurait l'air bien.
Je veux avoir une vue pour pouvoir mettre en place un conteneur général autour de cela ou peut-être pas une vue, mais
pourquoi n'utilisons-nous pas notre carte ici, cela
semble être une bonne idée.
Maintenant, cette carte, si nous l'examinons, n'a pas de marge et je veux avoir un peu d'espacement
entre cette carte en haut et ma carte récapitulative.
Donc donc ici, je vais lui donner un style séparé ici dans ma feuille de style, dans l'écran
de démarrage du jeu, je nommerai ce conteneur de résumé, le nom est toujours
à vous et je veux avoir une marge en haut de let disons 20, un bel espacement ici et ajoutez ceci via l'accessoire de style à la carte ici et là, je veux dire
que vous avez sélectionné, puis dans une nouvelle ligne, affichez le nombre d'une manière bien présentée, peut-être le nombre en quelque sorte boîte
avec une bordure séparée avec des coins arrondis pour qu'elle soit clairement visible ou aussi plus
grande que l'autre texte et donc ici, je vais ajouter une vue avec
un texte là-dedans et dans ce texte, j'aurai le numéro sélectionné mais maintenant que La vue et le
texte devraient avoir un style spécial et comme je prévois de le réutiliser, je vais
le récupérer et
l'externaliser dans un nouveau composant et je vais le nommer conteneur de numéros. Dans ce composant, je vais importer React de React et importer la vue et le texte de React Native,
puis avoir le composant de conteneur de numéros ici, exporter le conteneur de numéros par défaut et bien sûr, nous aurons également besoin d'une feuille de style ici, nous
allons donc configurer une feuille de style ainsi qu'avec la feuille de style. créer là-bas et ensuite dans ce composant, je vais
retourner cette vue ici avec le numéro sélectionné qui doit cependant être passé et je m'attends à
ce qu'il l'ait entre les balises d'ouverture et de fermeture de mon propre composant
à l'aide de accessoires enfants.
Maintenant, ce conteneur est bien sûr quelque chose que vous
pouvez configurer librement, j'ajouterai juste un style de conteneur, le nom du conteneur ici où je pense qu'une largeur de bordure de deux
pourrait sembler bonne, donc un peu plus large, une bordure plus large. Une couleur de bordure où je veux réellement utiliser ma couleur primaire ou
ma couleur d'accent, nous verrons laquelle semble meilleure.
Importons donc les couleurs à partir des constantes / Couleurs et de la couleur de la bordure, puis utilisons l'accent des couleurs pour
l'instant et voyons à quoi cela ressemble. Un peu de rembourrage pour que le numéro
ne soit pas directement sur les
bords de la boîte qui l'entoure, ne se trouve pas directement à côté de la bordure, un rayon de bordure de
10 pour
avoir des bordures arrondies, des coins arrondis excusez-moi, d'ailleurs si vous voulez voulez cibler des coins individuels,
vous pouvez le faire avec le rayon en haut à gauche de la bordure, le rayon en haut à droite, l'extrémité supérieure et le début en haut
prend également en compte les paramètres de l'utilisateur pour savoir s'il s'agit d'une langue de gauche à droite ou de
droite à gauche afin que vous puissiez cibler tous les individus coins ou définissez un rayon pour tous les coins avec un rayon de
bordure et ajoutez également une petite marge ici, une marge verticale de 10 peut-être pour avoir un certain espacement en haut et en bas
autour de ce conteneur ici et aussi important, centrez le texte là-dedans avec aligner le centre de l'élément et justifier le centre
du contenu en tirant parti de ce comportement de boîte flexible. Et avec cela, je veux aussi donner le numéro lui-même, donc le texte un
certain style et ce style est que je donne aussi au texte cette couleur d'accent et je veux utiliser une taille de police de 22 pour vraiment se
démarquer et plus tard , nous utiliserons également une police personnalisée. Et puis cette vue ici obtient le style
de conteneur et le texte ici reçoit bien sûr le style numérique. Avec cette configuration, nous pouvons utiliser le conteneur de numéros dans l'écran
de démarrage du jeu, donc là, nous ajoutons simplement cette importation et ce que nous faisons
ici est assez normal, que vous avez plusieurs composants dont vous composez votre application.
Alors maintenant, nous pouvons utiliser le conteneur de numéros dans le composant de l'écran de démarrage du jeu, l'ajouter ici en dessous de ce
texte et dans le conteneur de numéros, nous obtenons le contenu ici avec les accessoires enfants, nous le sortons avec les accessoires enfants,
cela signifie que nous devons le passer entre les balises
d'ouverture et de fermeture, donc ici, nous transmettons le numéro sélectionné.
Maintenant, c'est juste ma suggestion sur la façon dont nous pourrions styler cela, mais j'aime
le style et pour le moment, j'ajouterai un bouton ici qui est une balise à fermeture automatique, le bouton intégré avec
un titre de début de jeu, tous des bouchons pour le faire vraiment ressortir et enregistrer cela et maintenant si nous choisissons un nombre ici, c'est ce que nous
obtenons et ça n'a pas l'air trop moche je dirais. Pourtant, il y a deux choses que
je veux changer, ce texte ici devrait être centré et cette case avec le numéro ne devrait
pas être aussi large que la case environnante mais être seulement aussi large que le nombre en a besoin.
Maintenant, pour que les deux fonctionnent, je vais aller sur ma carte qui contient tout le contenu ici et
avec ça, je veux dire que je vais dans
le style de
l'écran de démarrage que j'utilise également sur cette carte, c'est mon conteneur de résumé et là nous peut aligner les éléments à centrer, au lieu
d'utiliser la valeur par défaut qui serait stretch et maintenant celle-ci est automatiquement centrée et la boîte n'est
plus large que le nombre l'exige.
Maintenant, cela ne semble pas trop minable, une dernière
chose que je viens de remarquer est également que lorsque nous confirmons une entrée, je veux également utiliser l'API
du clavier pour fermer le clavier afin que dès que nous appuyons sur confirmer ici, nous fermions également le clavier et maintenant
nous avons une belle sortie ici.
Maintenant, avec cela, nous avons une apparence de base solide, je dirais, nous
pouvons choisir un nombre, nous effectuons une validation grossière pour nous assurer que nous avons un numéro valide et la
prochaine étape est de faire fonctionner ce bouton de démarrage du jeu et nous échangeons ce que nous voyons ici pour
notre écran de jeu où l'ordinateur fait maintenant des suppositions et nous nous assurons ensuite de donner à l'utilisateur une
chance de dire si les chiffres doivent être supérieurs ou
inférieurs et nous point sont terminés et montrent un jeu sur l'écran.