Je veux donc commencer par un réglage fin de la police dans mes onglets ici, dans l'en-tête et aussi
le texte ici dans toutes mes recettes. Je veux m'assurer que partout, j'utilise la bonne police, mes propres
polices personnalisées et surtout ici, dans l'en-tête, dans les onglets, nous ne le faisons pas encore vraiment.
Bien sûr, il est relativement
facile de s'en assurer et commençons par l'en-tête. L'en-tête est généralement stylisé, comme la couleur d'arrière-plan, avec nos options de navigation par
défaut que nous mettons toujours en place à droite du navigateur
de pile, les options de navigation par défaut ici nous permettent de styliser l'en-tête et par exemple, de donner à l'en-tête en
général un style et ajoutez une couleur d'arrière-plan.
Il est maintenant important de reconnaître ici que le style d'en-tête ne cible vraiment que la boîte, l'arrière-plan pour ainsi
dire, donc le conteneur dans lequel se trouvent les éléments d'action, le bouton Retour et ce titre, le titre lui-même ne peut pas être
ciblé avec le style d'en-tête, mais
bien sûr, nous obtenons une alternative à cela. Outre le style d'en-tête où nous pouvons styliser ce
conteneur d'en-tête, nous avons également obtenu un style de titre d'en-tête et qui cible sans surprise le composant texte dans lequel
notre titre d'en-tête est présenté et là, nous pouvons le styler comme nous pouvons styliser des éléments de texte dans React Native,
par exemple en ajoutant une famille de polices open sans, j'utilise à nouveau
la version non gras pour que nous puissions rapidement voir la différence.
Ce n'est clairement plus en gras, je suppose, c'est assez clair à voir, surtout ici sur iOS et maintenant
si je le place en gras, je m'assure d'utiliser ce
bon style sur iOS et Android. Maintenant, pour le texte de dos ici, nous pouvons également
remplacer cette police par défaut qui est la police système par défaut en définissant le style de titre de l'en-tête, c'est un paramètre
distinct
que nous pouvons configurer ici et là, nous pouvons également définir la famille de polices sur disons
open sans, pas la version bold, je
ne veux pas l'avoir dans le style bold mais je veux l'avoir dans ma propre police et cela devrait maintenant
être open sans ici et utiliser ma propre police. Sur Android bien sûr, cela n'a pas d'effet car il n'y
a pas de texte en arrière. C'est donc une
chose, c'est l'en-tête, pour les onglets, c'est assez similaire. Là, nous pouvons aller à notre navigateur d'onglets que nous créons,
comme le navigateur d'onglets
en
bas du matériau et cela a bien sûr notre tabScreenConfig puis ce deuxième objet où nous configurons le navigateur lui-même
et comme toujours
dans React navigation, c'est le deuxième objet où nous peut contrôler l'apparence générale
des éléments spécifiques au navigateur, comme dans le cas du navigateur d'onglets, la couleur de l'icône
d'onglet, la couleur de la barre, la couleur de teinte ou également le style d'étiquette et en fait ici sur les options de la
barre d'onglets pour le Navigateur de l'onglet inférieur, nous pouvons ajouter un
style d'étiquette et encore une fois, cela cible
le composant texte qui contient notre étiquette, nous pouvons ajouter ici une
famille de polices d'OpenSans-Bold afin que nous puissions voir clairement la différence, si cela se recharge, maintenant clairement
est un texte en gras. En fait, cela ne semble pas trop mal,
donc je pense que nous pouvons garder cela,
mais bien sûr, vous pouvez également le définir pour simplement ouvrir sans si vous voulez une version plus mince,
mais maintenant j'utiliserais notre propre police. Maintenant, pour Android,
le navigateur de l'onglet inférieur du matériau a également des options de configuration, mais en fait, il
n'a pas de style d'étiquette.
Ce que vous pouvez faire à la place se trouve sur les onglets séparés que vous chargez, donc sur les options de navigation
des onglets que vous chargez, où vous définissez également l'icône de la barre d'onglets et ainsi de suite, nous pouvons ajouter une étiquette de barre d'onglets ici où nous pourrions
définir une étiquette comme des repas, plusieurs marques d'explication pour remplacer ce que nous utilisons comme étiquette maintenant à la fois sur iOS et
également
sur Android et qui peut en fait être une chaîne comme celle-ci, mais vous pouvez également définir cela sur un composant
React, pour un composant de texte à savoir et ensuite là-dedans, vous pouvez configurer votre étiquette, vos repas mais bien sûr maintenant ici, vous
pouvez ajouter du style et ajouter tous les styles que vous voulez.
Donc, un peu d'une solution de contournement car il n'y a pas d'autre moyen intégré de styliser cela pour
le navigateur des onglets inférieurs du matériau, mais mieux que rien.
Donc ici, nous pouvons maintenant définir la famille de polices sur OpenSans-Bold et si nous le faisons, nous devons bien sûr également nous assurer
que nous importons maintenant le composant texte de React Native car sinon nous ne pouvons pas l'utiliser là-bas et
maintenant
avec ça , nous obtenons également cela sur notre iOS bien sûr parce que nous partageons la configuration, nous allons résoudre
ce problème dans une seconde, mais maintenant, c'est ainsi que nous pouvons configurer notre propre style là-bas, mais
bien sûr, nous avons maintenant perdu la couleur ce qui est l'inconvénient de définir cela manuellement ici et comme nous n'avons besoin que de cette solution de contournement
ici, pour Android, pour les onglets inférieurs du matériau, la solution la plus simple consiste à utiliser l'API de la plate-forme et à ne définir cette étiquette de
barre d'onglets sur ce composant de texte que si nous '' re sur Android car seulement alors, nous avons
besoin de cette solution de contournement pour définir la famille de polices. Je vais donc vérifier si nous sommes sur Android et si
c'est le cas, je vais retourner un composant texte ici, sinon je vais juste retourner les repas de texte et ensuite l'avantage de simplement renvoyer
un texte ici est simplement que notre autre les paramètres qui définissent la couleur de la teinte et le style
d'étiquette, etc. seront activés et ne seront pas remplacés. Si nous définissons notre propre composant de texte, nous désactiverons toutes ces fonctionnalités
par défaut, toutes ces fonctionnalités par défaut qui sont intégrées dans le navigateur de l'onglet inférieur.
Le problème avec le navigateur de l'onglet inférieur du matériau est qu'il n'a tout simplement pas toutes
ces fonctionnalités
par défaut intégrées, donc nous devons remplacer cela, mais nous devons seulement le faire pour Android d'autre part.
Maintenant, nous pouvons copier cela et faire exactement la même chose bien
sûr ici pour les favoris, rendre les favoris sous forme de texte sur iOS et bien sûr aussi dans le composant texte pour Android et avec cela, nous devrions maintenant avoir
un style qui fonctionne et cela semble bon . Sur iOS, nous n'avons pratiquement rien
changé et sur Android, nous avons maintenant également nos propres polices personnalisées.
C'est donc un peu une solution de contournement qui
est nécessaire ici malheureusement lorsque vous travaillez avec le navigateur des onglets du bas mais pas trop difficile à implémenter et avec
cela, nous nous assurons que nous utilisons notre propre police personnalisée partout dans la navigation liée fonctionnalités
de notre application.