Maintenant, nous avons l'apparence de la carte, maintenant, comme prochaine chose, réparons les boutons et c'est quelque chose que je vous ai déjà montré,
donc
certainement votre chance de mettre la vidéo en pause et de le faire vous-même.
Je veux m'assurer que les boutons ont la même taille, ils ne doivent pas prendre toute la
largeur disponible, mais ils doivent avoir une taille égale, ce qui garantit que le texte y tient et qu'il est de
taille égale.
Donc, votre chance de mettre la vidéo en pause, nous le ferons ensuite ensemble. Avez-vous réussi?
Assurons-nous que les boutons ont la même taille et pour cela, dans l'écran de démarrage du jeu où j'ai les boutons,
vous avez appris que la solution consiste à envelopper les boutons dans une vue. Vous devez donc ajouter votre propre composant de vue autour
des boutons et maintenant
vous pouvez attribuer un style à ces boutons, donc aux deux boutons ici et j'utiliserai un objet bouton dans
mon objet styles là-bas, alors ajoutons
un bouton ici et donnez simplement une largeur et ici, une largeur que je vais choisir est disons 80.
Voyons à quoi cela ressemble, si je l'enregistre, un peu trop petit car il semble qu'il y a un saut de ligne
dans ce bouton.
Alors allons-y avec 120, maintenant c'est certainement trop, alors qu'en est-il
de 100 et cela me semble plutôt bien.
Maintenant, en plus et ce n'était pas une tâche pour un utilisateur, pas de soucis
si vous ne le faites pas, je veux changer leurs couleurs et l'une des couleurs devrait être notre
couleur principale et je veux également mettre en place un accent, certains couleurs secondaires pour ainsi dire que nous pouvons utiliser.
Donc, pour cela, dans le composant d'écran de démarrage, sur le bouton lui-même, il y a un accessoire de couleur que
vous pouvez définir pour contrôler
la couleur et pour Android, c'est la couleur d'arrière-plan, pour iOS qui sera la couleur du texte et maintenant
la réinitialisation bouton, là je veux mettre en place une couleur de # 717fc, c'est une belle couleur
je pense et pour le bouton
principal, le bouton de confirmation, je vais utiliser mon thème principal et je veux utiliser la même couleur que j'utilise
dans l'en-tête .
Donc là j'ai ce code hexadécimal utilisé comme couleur de fond, je vais
utiliser la même couleur ici pour ce deuxième bouton maintenant. Avec cela, nous pouvons enregistrer cela et maintenant nous
avons obtenu ces deux couleurs de bouton ici, ce qui semble assez agréable à mon avis.
Maintenant, un inconvénient de cette approche ou une chose que nous pouvons améliorer est que j'utilise ce code hexadécimal ici, je l'utilise
dans l'en-tête et il est probable que plus tard dans l'application, nous
voulons également utiliser la même couleur à d'autres endroits. .
Donc, ce serait bien si nous pouvions définir cela comme une sorte de thème
que vous pourriez dire, que nous pourrions facilement utiliser ces couleurs sans copier les codes hexadécimaux dans notre application et que nous pouvons également
changer la couleur en un seul endroit si nous voulons utilisez une couleur différente et nous n'avons pas
à le faire dans des dizaines de composants.
Et pour cela, j'utiliserai une approche où j'ajouterai un nouveau dossier au niveau racine et je le nommerai des constantes
et comme toujours, vous pouvez nommer ces dossiers comme vous voulez et
là-dedans je veux avoir des couleurs. fichier js. Encore une fois, ce nom peut
également être nommé comme vous voulez, car ce que ce fichier fera, c'est qu'il exportera un objet Javascript par défaut, il exportera un
objet Javascript et là-dedans, vous pouvez avoir toutes les paires clé-valeur que vous voulez et je vais définir une couleur primaire, donc juste primaire
comme nom de clé et cela devrait être ce code hexadécimal que je viens de copier, donc cette
couleur d'en-tête est également accentuée ou secondaire, peu importe ce que vous voulez,
je vais choisir une couleur d'accentuation et cela devrait être cette autre couleur que j'ai
utilisée sur le premier bouton, donc ce code hexadécimal ici, je vais l'utiliser ici.
Maintenant, ces couleurs sont définies ici et nous pouvons maintenant simplement les importer à partir de ce fichier et chaque fois que
nous les changeons ici, elles changent partout dans cette application et nous pouvons donc facilement les échanger pendant le développement.
Alors maintenant, dans l'écran de démarrage du jeu, nous pouvons simplement aller de l'avant et importer des couleurs à partir de constantes / Couleurs comme celle-ci et
j'ai donné un C majuscule ici pour indiquer qu'il s'agit d'une collection de valeurs, vous pouvez nommer ce que vous voulez, vous
pouvez également utiliser
un c minuscule, cette dénomination n'a pas d'importance et vous pouvez
maintenant utiliser des couleurs ici pour attribuer vos couleurs.
Donc, pour ce bouton de réinitialisation, nous allons maintenant utiliser une valeur dynamique afin de pouvoir atteindre les couleurs. accent et ici pour le bouton principal, pour le bouton
de confirmation, je vais aller avec les couleurs. primaire et même
dans l'en-tête. Bien sûr, nous voulons maintenant également utiliser cette couleur
et non la coder en dur ici, au lieu d'importer des couleurs à partir de constantes / couleurs et avec celles importées, vous pouvez
également utiliser cela dans une feuille de style, pas seulement en jsx, vous pouvez l'utiliser n'importe où dans
ce fichier après tout, alors
maintenant ici, je ferai référence aux couleurs. primaire. Et si vous enregistrez cela, encore une
fois, nous avons le même aspect qu'avant, mais encore une fois d'une manière plus élégante où si vous décidez que votre couleur d'accentuation ne doit pas être
cette couleur mais doit être bleue, il vous suffit de l'échanger ici, votre application est reconstruit et vous avez un bouton bleu.
C'est donc l'énorme avantage de gérer vos couleurs ou d'autres constantes de base dans de tels fichiers, vous pouvez avoir un autre fichier
nommé texte par exemple où vous avez des tailles de police de base ou un autre espacement de fichier où vous stockez des valeurs par défaut pour les marges
ou le remplissage afin que vous ne pas avoir à utiliser manuellement les mêmes valeurs encore et encore, ce sont toutes
des approches que vous
pouvez utiliser pour vous faciliter la vie en tant que développeur et pour avoir du code où
vous pouvez rapidement échanger des valeurs si vous en avez besoin.
Pour l'instant, je vais juste gérer mes couleurs là-dedans parce que c'est l'une des choses les plus ennuyeuses
à copier et c'est une très bonne approche donc de la gérer dans un tel fichier.