Maintenant que nous avons travaillé sur
le texte ici, nous pouvons maintenant revenir à l'application. js et se débarrasser de ce changement temporaire ici où
nous montrons
toujours le jeu sur l'écran, nous ne voulons plus le faire, au lieu de cela, nous voulons recommencer
avec l'écran de démarrage normal du jeu et en plus de ce changement, j'ai maintenant aussi voulez faire un ajustement supplémentaire et c'est ce bouton de
démarrage du jeu.
Nous utilisons ici le bouton normal, ce qui est bien sûr quelque chose que vous pouvez faire, mais parfois vous voulez
également créer votre propre bouton, vous voulez avoir un contrôle total sur l'apparence de votre bouton et pour cela,
vous pouvez bien sûr créer le vôtre bouton et c'est exactement ce que nous allons faire maintenant.
Par conséquent, dans le dossier des composants, j'ajouterai mon propre bouton et vous pouvez le
nommer
comme vous le souhaitez, vous pouvez le nommer bouton, mais
c'est déjà le nom de celui intégré et, bien que vous puissiez bien sûr encore nommer le vôtre comme ceci, pour éviter tout
conflit de nom ou confusion, je nommerai mon bouton ici le bouton principal car ce sera mon principal, mon bouton principal que j'utilise pour les
grandes actions de ce
jeu comme démarrer un nouveau jeu.
Maintenant que c'est le nom du fichier, nous aurons bien sûr un composant React normal,
donc nous importons React.
Nous importons une vue ici, nous aurons certainement besoin de
texte, nous aurons certainement besoin d'une feuille de style de React Native comme celle-ci et puis
ici, nous avons le composant bouton principal qui reçoit les accessoires et qui, en fin de
compte, renverra du jsx. Nous aurons notre objet styles avec Feuille de style. créer et comme
toujours, nous allons exporter notre bouton principal.
Et maintenant, la question est de savoir comment créer votre propre bouton?
Maintenant, cela peut sembler très complexe à faire, mais en fait, ce n'est pas le cas. Votre propre bouton est également juste une combinaison
de vue et de texte et très important, également un composant tactile, comme la surbrillance tactile ou l'opacité tactile ou la
rétroaction native tactile ou même tactile sans rétroaction si vous ne
voulez pas donner de rétroaction visuelle. Donc ici, je vais opacité tactile et nous avons
besoin de cela pour donner aux utilisateurs des commentaires sur le fait que le bouton a été pressé et pour enregistrer un événement onPress
et à part cela, nous allons simplement construire notre bouton avec une vue que nous avons stylisée d'une certaine
manière et un texte là-dedans.
Alors maintenant, ici, dans le bouton principal, nous pouvons retourner notre opacité tactile et là-bas, avoir une vue que nous pouvons utiliser pour ensuite styliser
le bouton et là-dedans, peut-être un texte pour un texte qu'un bouton devrait avoir.
Maintenant, disons que notre bouton doit être utilisable de telle sorte que nous ayons passé un texte
directement entre les balises d'ouverture
et de fermeture de notre composant, donc ici nous pouvons utiliser les accessoires
enfants comme le texte que je veux afficher sur le bouton, puis ici sur cette vue, je 'll aura un style de bouton de styles disons, sur ce texte intérieur
ici, nous pourrions avoir un style de style de bouton de style et ces noms sont à vous bien sûr et sur l'opacité tactile, j'ajouterai l'écouteur onPress
et nous je vais devoir faire quelque chose là-bas.
Alors maintenant, nous obtenons le squelette de notre bouton, nous
pouvons maintenant commencer à lui ajouter des styles.
Maintenant, bien sûr, vous pouvez styliser ce bouton de la manière que vous voulez, j'ai un certain
style à l'esprit ici que je
vais ajouter, mais encore une fois, jouez avec cela et appliquez vos propres styles.
Donc, pour le bouton lui-même qui est la vue autour du texte, je veux donner au bouton une certaine couleur d'arrière-plan
et vous pouvez également vous assurer que cela peut être défini de l'extérieur bien
sûr, vous pouvez devenir vraiment créatif ici. Je vais coder en dur une couleur ici en utilisant bien sûr ma constante de couleurs ici. Je vais donc importer des couleurs à
partir de constantes / Couleurs, des couleurs comme celle-ci, puis ici utiliser des couleurs de couleur primaire, la couleur primaire peut-être, comme ça.
C'est donc la couleur d'arrière-plan que ce bouton devrait avoir, encore une fois, vous pouvez également vous assurer
que ce style est défini dynamiquement à l'aide d'un accessoire que vous obtenez de
l'extérieur, mais ici, je le coderai ici.
En plus de cela, le bouton doit avoir un rembourrage afin que le texte ne repose
pas directement sur les bords
du conteneur de bouton, donc de la zone autour du texte mais il y a un certain espacement et vous pouvez
utiliser le même rembourrage dans toutes les directions mais je veux
utiliser un rembourrage vertical de 12, donc pas beaucoup de rembourrage en haut et en bas et un rembourrage horizontal de disons
30, donc beaucoup plus de rembourrage à gauche et à droite.
C'est le bouton, maintenant pour le texte du bouton, il y a aussi la
couleur du blanc qui devrait bien paraître sur notre couleur primaire, vous pouvez aussi utiliser le noir
parce que notre couleur primaire est en fait une couleur où, comme vous pouvez le voir, le blanc et le noir
fonctionne réellement, vous pouvez donc utiliser l'un
ou l'autre, mais je vais utiliser du blanc ici pour le bouton et j'ajouterai une famille de polices open sans pour utiliser cette police
personnalisée là aussi, comme vous l'avez appris, vous devez l'activer chaque texte, il n'y a pas d'héritage, il n'y a pas de
police globale que vous pouvez configurer, chaque texte qui devrait utiliser cette police doit l'obtenir et j'ajouterai une taille de
police de disons 18 pour avoir un plus gros texte ici dans ce bouton . Maintenant, lorsque le bouton est enfoncé, je ne souhaite généralement
pas gérer cet événement de presse à l'intérieur du bouton, mais à l'intérieur du
composant où nous utilisons le bouton.
Je veux donc simplement le transmettre et
pour cela, nous pouvons simplement nous attendre à obtenir une référence de fonction, une fonction de gestionnaire d'événements sur le disons
onPress prop de notre bouton personnalisé, mais vous pouvez nommer
ce prop n'importe quoi, vous pouvez le nommer surClick car dans à la fin, c'est vous qui
utilisez votre
propre bouton et là, il vous suffit de vous assurer de transmettre une référence de fonction d'ajustement, un pointeur d'ajustement
à une fonction de gestionnaire d'événements à onPress ou tout ce que vous nommez prop sur votre propre bouton.
Donc, ce nom
est à vous, utilisons maintenant le bouton principal et utilisons-le
sur l'écran de démarrage du jeu. Là, nous pouvons simplement
l'importer, alors importez le bouton principal à partir de components / MainButton et ce bouton principal est maintenant utilisé ici pour démarrer un nouveau
jeu.
Je vais donc remplacer le bouton ici par le
bouton principal mais gardez à l'esprit que sur ce bouton, j'ai configuré le contenu, le texte à afficher de telle sorte que
c'est en fait le contenu qui est passé entre les balises d'ouverture et de fermeture de notre bouton et donc de retour dans l'écran de démarrage du
jeu, le titre ici
n'est plus transmis sur un accessoire de titre, mais à la place, nous avons maintenant une balise d'ouverture et de
fermeture pour notre propre bouton et nous y ajoutons le jeu de démarrage.
Maintenant onPress est toujours un accessoire que nous laissons ici parce que dans le bouton principal, je transmets l'événement onPress
pour ainsi dire, à la fonction que j'obtiens moi-même sur prop prop ici,
donc nous devons définir l'accessoire onPress sur notre propre bouton et donc avec cela, nous devrions avoir un joli bouton
principal ici, un joli bouton lorsque nous commençons une nouvelle partie.
Essayons ici, voici à
quoi ça ressemble et ça a l'air plutôt sympa à mon avis, un joli bouton.
Je n'ai pas
fini cependant, je veux avoir des coins arrondis sur ce bouton et pour cela,
de retour dans le fichier du bouton principal, nous pouvons bien sûr simplement aller à cette propriété de
bouton ici dans la feuille de style qui est l'objet de style appliqué à notre vue et là, nous pouvons ajouter un rayon de bordure de 25
et si nous le faisons, alors vous verrez que si je reçois maintenant ce bouton, il a maintenant ce joli look ici.
Vous pouvez également l'afficher sur Android, a maintenant des coins arrondis et a cet effet d'opacité agréable lorsque vous
appuyez
dessus et, comme mentionné précédemment, vous pouvez modifier cet effet d'opacité en allant au composant d'opacité tactile
et là, vous pouvez définissez l'opacité active au niveau d'opacité que vous souhaitez avoir lorsqu'elle est enfoncée, par exemple si
vous utilisez une
valeur plutôt élevée ici, alors cet effet est moins fort, maintenant il n'est que légèrement
transparent lorsque nous tapotons dessus et pas aussi transparent que avant. Mais c'est à vous de décider ce
que
vous voulez ici, j'irai. 6 ici pour avoir un effet légèrement
plus fort, mais encore une fois, c'est quelque chose que vous pouvez configurer et en général, ma suggestion serait de jouer avec cela et de
voir comment vous pouvez styler ce bouton, comment vous pouvez vraiment le régler avec précision selon vos besoins. Maintenant, avec le bouton personnalisé ajouté, je veux
également l'utiliser sur le jeu
sur l'écran, donc
là, je vais également importer le bouton principal à partir de composants / MainButton comme ceci, puis ajouter simplement
ce bouton principal ici lorsque nous montrerons notre nouveau bouton de jeu là-bas.
Utilisez le bouton principal à la place, supprimez donc l'accessoire de titre car ce n'est pas
comme cela que nous définissons le
titre sur notre propre bouton personnalisé, nous devons plutôt le passer ici entre les balises d'ouverture et de fermeture de nos balises de composant personnalisées.
Donc donc maintenant ici, cela devrait aussi être plus joli si nous terminons rapidement un jeu ici, essayant de laisser l'ordinateur deviner 33,
nous y sommes et
maintenant nous voyons le joli bouton ici aussi.
Nous voyons également la sortie correcte ici en ce qui concerne le nombre
de tours
qu'il a fallu et le nombre que nous devions deviner et nous pouvons commencer un nouveau jeu par
la suite et le refaire très rapidement, oui, tout cela est vraiment très joli.
La dernière chose que je veux encore faire, c'est que je veux travailler sur ces deux boutons, plus bas et plus grands.
Ils ont l'air un peu
ennuyeux, je dirais, nous pouvons certainement les rendre plus excitants. Maintenant, une façon de les rendre plus excitantes est
que nous utilisons également notre bouton personnalisé.
Donc, bien sûr, ici dans l'écran de jeu, nous pouvons également importer le bouton principal à partir de components / MainButton, donc notre
propre bouton personnalisé et l'utiliser à la place du bouton que nous utilisons actuellement,
qui est intégré. Donc, utilisez
notre propre bouton ici, donc bien sûr, déplacez le titre entre les balises d'ouverture
et de fermeture, donc ici c'est plus bas puis ici pour le deuxième bouton, c'est plus grand et
maintenant cela devrait être un peu plus joli si nous commençons un nouveau jeu ici .
Maintenant, nous utilisons nos boutons personnalisés ici, mais maintenant nous voyons également un problème,
ils sont simplement un peu trop gros, ils sont trop proches les uns des autres,
nous pouvons cependant changer cela en descendant vers le conteneur de boutons et en donnant un peu plus de
largeur, peut-être définir la largeur maximale à 90% ici en fait.
Alors maintenant, si nous essayons à nouveau, oui, cela a l'air un peu mieux, il y a au moins un peu d'espacement entre
les boutons et pour l'instant cela fonctionnera car pour l'instant, nous n'optimisons pas pour toutes les tailles d'écran.
Augmentons également cette largeur ici à 400, afin que nous ayons suffisamment de largeur, nous
utilisons en fait 400 pixels et maintenant cela semble bien ici sur iOS
et également sur Android. Maintenant, cela semble un peu mieux
comme je l'ai mentionné, mais ce ne serait pas aussi bien si nous avions des icônes là-dedans, au lieu du texte parce que le texte fonctionne bien sûr, mais une icône
pourrait également faire l'affaire et nous n'avons pas utilisé
d'icônes jusqu'à présent depuis vous en avez cependant souvent besoin dans les applications mobiles. C'est certainement quelque chose que vous devez également savoir, vous
devez savoir comment travailler avec des icônes, comment ajouter des icônes à l'intérieur de votre application et c'est
donc ce que nous ferons ensuite.