1
00:00:02,230 --> 00:00:09,790
Je veux donc commencer par un réglage fin de la police dans mes onglets ici, dans l'en-tête et aussi

2
00:00:09,970 --> 00:00:15,940
le texte ici dans toutes mes recettes. Je veux m'assurer que partout, j'utilise la bonne police, mes propres

3
00:00:15,940 --> 00:00:19,930
polices personnalisées et surtout ici, dans l'en-tête, dans les onglets, nous ne le faisons pas encore vraiment.

4
00:00:20,050 --> 00:00:22,970
Bien sûr, il est relativement

5
00:00:22,990 --> 00:00:31,040
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

6
00:00:31,040 --> 00:00:34,200
défaut que nous mettons toujours en place à droite du navigateur

7
00:00:34,210 --> 00:00:40,640
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

8
00:00:40,640 --> 00:00:43,390
général un style et ajoutez une couleur d'arrière-plan.

9
00:00:43,470 --> 00:00:50,750
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

10
00:00:50,750 --> 00:00:59,540
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

11
00:00:59,660 --> 00:01:02,390
ciblé avec le style d'en-tête, mais

12
00:01:02,390 --> 00:01:08,420
bien sûr, nous obtenons une alternative à cela. Outre le style d'en-tête où nous pouvons styliser ce

13
00:01:08,420 --> 00:01:14,300
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

14
00:01:14,300 --> 00:01:20,420
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,

15
00:01:20,420 --> 00:01:23,960
par exemple en ajoutant une famille de polices open sans, j'utilise à nouveau

16
00:01:23,960 --> 00:01:27,280
la version non gras pour que nous puissions rapidement voir la différence.

17
00:01:27,320 --> 00:01:35,560
Ce n'est clairement plus en gras, je suppose, c'est assez clair à voir, surtout ici sur iOS et maintenant

18
00:01:35,560 --> 00:01:40,240
si je le place en gras, je m'assure d'utiliser ce

19
00:01:40,240 --> 00:01:46,280
bon style sur iOS et Android. Maintenant, pour le texte de dos ici, nous pouvons également

20
00:01:46,540 --> 00:01:53,380
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

21
00:01:53,380 --> 00:01:53,930
distinct

22
00:01:53,950 --> 00:01:59,110
que nous pouvons configurer ici et là, nous pouvons également définir la famille de polices sur disons

23
00:01:59,140 --> 00:02:01,350
open sans, pas la version bold, je

24
00:02:01,360 --> 00:02:07,600
ne veux pas l'avoir dans le style bold mais je veux l'avoir dans ma propre police et cela devrait maintenant

25
00:02:07,600 --> 00:02:13,470
être open sans ici et utiliser ma propre police. Sur Android bien sûr, cela n'a pas d'effet car il n'y

26
00:02:13,470 --> 00:02:17,170
a pas de texte en arrière. C'est donc une

27
00:02:17,190 --> 00:02:24,660
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,

28
00:02:24,660 --> 00:02:25,940
comme le navigateur d'onglets

29
00:02:25,950 --> 00:02:26,700
en

30
00:02:26,880 --> 00:02:33,390
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

31
00:02:33,390 --> 00:02:34,440
et comme toujours

32
00:02:34,440 --> 00:02:38,880
dans React navigation, c'est le deuxième objet où nous peut contrôler l'apparence générale

33
00:02:38,880 --> 00:02:44,270
des éléments spécifiques au navigateur, comme dans le cas du navigateur d'onglets, la couleur de l'icône

34
00:02:44,280 --> 00:02:52,280
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

35
00:02:52,280 --> 00:02:56,330
barre d'onglets pour le Navigateur de l'onglet inférieur, nous pouvons ajouter un

36
00:02:56,330 --> 00:02:59,000
style d'étiquette et encore une fois, cela cible

37
00:02:59,000 --> 00:03:03,010
le composant texte qui contient notre étiquette, nous pouvons ajouter ici une

38
00:03:03,140 --> 00:03:09,230
famille de polices d'OpenSans-Bold afin que nous puissions voir clairement la différence, si cela se recharge, maintenant clairement

39
00:03:09,230 --> 00:03:12,800
est un texte en gras. En fait, cela ne semble pas trop mal,

40
00:03:12,800 --> 00:03:14,510
donc je pense que nous pouvons garder cela,

41
00:03:14,720 --> 00:03:18,920
mais bien sûr, vous pouvez également le définir pour simplement ouvrir sans si vous voulez une version plus mince,

42
00:03:19,010 --> 00:03:22,320
mais maintenant j'utiliserais notre propre police. Maintenant, pour Android,

43
00:03:22,320 --> 00:03:29,600
le navigateur de l'onglet inférieur du matériau a également des options de configuration, mais en fait, il

44
00:03:29,720 --> 00:03:31,910
n'a pas de style d'étiquette.

45
00:03:31,910 --> 00:03:38,690
Ce que vous pouvez faire à la place se trouve sur les onglets séparés que vous chargez, donc sur les options de navigation

46
00:03:38,690 --> 00:03:47,170
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

47
00:03:47,170 --> 00:03:54,160
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

48
00:03:54,160 --> 00:03:54,540
également

49
00:03:54,550 --> 00:04:00,490
sur Android et qui peut en fait être une chaîne comme celle-ci, mais vous pouvez également définir cela sur un composant

50
00:04:00,490 --> 00:04:07,450
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

51
00:04:07,720 --> 00:04:11,490
pouvez ajouter du style et ajouter tous les styles que vous voulez.

52
00:04:11,500 --> 00:04:16,120
Donc, un peu d'une solution de contournement car il n'y a pas d'autre moyen intégré de styliser cela pour

53
00:04:16,120 --> 00:04:19,060
le navigateur des onglets inférieurs du matériau, mais mieux que rien.

54
00:04:19,060 --> 00:04:25,060
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

55
00:04:25,060 --> 00:04:29,950
que nous importons maintenant le composant texte de React Native car sinon nous ne pouvons pas l'utiliser là-bas et

56
00:04:29,950 --> 00:04:30,240
maintenant

57
00:04:35,760 --> 00:04:40,980
avec ça , nous obtenons également cela sur notre iOS bien sûr parce que nous partageons la configuration, nous allons résoudre

58
00:04:40,980 --> 00:04:45,780
ce problème dans une seconde, mais maintenant, c'est ainsi que nous pouvons configurer notre propre style là-bas, mais

59
00:04:45,810 --> 00:04:52,820
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

60
00:04:52,820 --> 00:04:59,930
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

61
00:04:59,930 --> 00:05:04,760
barre d'onglets sur ce composant de texte que si nous '' re sur Android car seulement alors, nous avons

62
00:05:04,760 --> 00:05:11,330
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

63
00:05:11,330 --> 00:05:18,650
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

64
00:05:18,650 --> 00:05:24,710
un texte ici est simplement que notre autre les paramètres qui définissent la couleur de la teinte et le style

65
00:05:24,710 --> 00:05:30,920
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

66
00:05:30,920 --> 00:05:34,700
par défaut, toutes ces fonctionnalités par défaut qui sont intégrées dans le navigateur de l'onglet inférieur.

67
00:05:34,700 --> 00:05:39,200
Le problème avec le navigateur de l'onglet inférieur du matériau est qu'il n'a tout simplement pas toutes

68
00:05:39,200 --> 00:05:39,800
ces fonctionnalités

69
00:05:39,860 --> 00:05:44,690
par défaut intégrées, donc nous devons remplacer cela, mais nous devons seulement le faire pour Android d'autre part.

70
00:05:44,780 --> 00:05:48,290
Maintenant, nous pouvons copier cela et faire exactement la même chose bien

71
00:05:48,290 --> 00:05:57,530
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

72
00:05:57,590 --> 00:06:03,860
un style qui fonctionne et cela semble bon . Sur iOS, nous n'avons pratiquement rien

73
00:06:03,920 --> 00:06:09,740
changé et sur Android, nous avons maintenant également nos propres polices personnalisées.

74
00:06:09,740 --> 00:06:12,520
C'est donc un peu une solution de contournement qui

75
00:06:12,520 --> 00:06:19,130
est nécessaire ici malheureusement lorsque vous travaillez avec le navigateur des onglets du bas mais pas trop difficile à implémenter et avec

76
00:06:19,130 --> 00:06:24,290
cela, nous nous assurons que nous utilisons notre propre police personnalisée partout dans la navigation liée fonctionnalités

77
00:06:24,800 --> 00:06:25,850
de notre application.