1
00:00:02,230 --> 00:00:09,790
Daher möchte ich mit einer Feinabstimmung der Schriftarten in meinen Registerkarten hier, in der Kopfzeile und auch im

2
00:00:09,970 --> 00:00:15,940
Text hier in all meinen Rezepten beginnen. Ich möchte sicherstellen, dass ich überall die richtige Schriftart verwende, meine eigenen

3
00:00:15,940 --> 00:00:19,930
benutzerdefinierten Schriftarten, und insbesondere hier, in der Kopfzeile, in den Registerkarten, stellen wir dies noch nicht wirklich sicher.

4
00:00:20,050 --> 00:00:22,970
Natürlich ist es relativ einfach,

5
00:00:22,990 --> 00:00:31,040
dies sicherzustellen, und wir beginnen mit dem Header. Der Header ist im Allgemeinen wie die Hintergrundfarbe mit unseren Standardnavigationsoptionen

6
00:00:31,040 --> 00:00:34,200
gestaltet, die wir immer rechts im Stapelnavigator eingerichtet haben.

7
00:00:34,210 --> 00:00:40,640
Die Standardnavigationsoptionen hier ermöglichen es uns, den Header zu formatieren und beispielsweise dem Header im Allgemeinen einen Stil und

8
00:00:40,640 --> 00:00:43,390
zu geben Fügen Sie eine Hintergrundfarbe hinzu.

9
00:00:43,470 --> 00:00:50,750
Hier ist es wichtig zu erkennen, dass der Header-Stil wirklich nur auf das Feld abzielt, sozusagen auf

10
00:00:50,750 --> 00:00:59,540
den Hintergrund, also auf den Container, in dem sich die Aktionselemente, die Zurück-Schaltfläche und dieser Titel befinden. Der Titel selbst kann

11
00:00:59,660 --> 00:01:02,390
jedoch nicht mit dem Header-Stil ausgerichtet

12
00:01:02,390 --> 00:01:08,420
werden Natürlich bekommen wir eine Alternative dazu. Neben dem Header-Stil, in dem wir diesen Header-Container

13
00:01:08,420 --> 00:01:14,300
formatieren können, haben wir auch einen Header-Titelstil, der nicht überraschend auf die Textkomponente abzielt, in der unser Header-Titel

14
00:01:14,300 --> 00:01:20,420
dargestellt wird, und dort können wir ihn so formatieren, wie wir beispielsweise Textelemente in React Native formatieren können Durch

15
00:01:20,420 --> 00:01:23,960
Hinzufügen einer Schriftfamilie von Open Sans verwende ich wieder die nicht

16
00:01:23,960 --> 00:01:27,280
fett gedruckte Version, damit wir den Unterschied schnell erkennen können.

17
00:01:27,320 --> 00:01:35,560
Dies ist eindeutig nicht mehr fett, denke ich, es ist ziemlich klar zu sehen, besonders hier unter iOS, und jetzt, wenn ich

18
00:01:35,560 --> 00:01:40,240
dies auf fett stelle, stelle ich sicher, dass ich diesen richtigen Stil sowohl

19
00:01:40,240 --> 00:01:46,280
auf iOS als auch auf Android verwende. Für den hinteren Text hier können wir übrigens auch diesen

20
00:01:46,540 --> 00:01:53,380
Standard überschreiben, bei dem es sich um die Standard-Systemschriftart handelt, indem wir den Titelstil des Header-Back-Titels festlegen. Dies ist eine separate

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

22
00:01:53,950 --> 00:01:59,110
die wir hier und da festlegen können. Wir können auch die Schriftfamilie festlegen Sagen wir Open

23
00:01:59,140 --> 00:02:01,350
Sans, nicht die fette Version. Ich

24
00:02:01,360 --> 00:02:07,600
möchte das nicht im fetten Stil haben, aber ich möchte es in meiner eigenen Schrift haben. Dies sollte jetzt

25
00:02:07,600 --> 00:02:13,470
hier ohne Sans sein und meine eigene Schrift verwenden. Auf Android hat dies natürlich keine Auswirkung, da

26
00:02:13,470 --> 00:02:17,170
wir dort keinen Rücktext haben. Das ist eine Sache,

27
00:02:17,190 --> 00:02:24,660
das ist der Header, für die Registerkarten ist es ziemlich ähnlich. Dort können wir zu unserem Tab-Navigator gehen, den wir erstellen,

28
00:02:24,660 --> 00:02:25,940
wie zum Beispiel

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

30
00:02:26,880 --> 00:02:33,390
unteren Tab-Navigator des Materials. Dieser hat natürlich unsere tabScreenConfig und dann dieses zweite Objekt, in dem wir den

31
00:02:33,390 --> 00:02:34,440
Navigator selbst

32
00:02:34,440 --> 00:02:38,880
konfigurieren, und wie immer in der React-Navigation ist es das zweite Objekt,

33
00:02:38,880 --> 00:02:44,270
in dem wir uns befinden kann das allgemeine Erscheinungsbild der navigatorspezifischen Dinge steuern, wie im

34
00:02:44,280 --> 00:02:52,280
Fall des Registerkartennavigators, der Farbe des Registerkartensymbols, der Balkenfarbe, der Farbtonfarbe oder auch des Beschriftungsstils und in der Tat hier auf der

35
00:02:52,280 --> 00:02:56,330
Registerkartenleiste Optionen für die Im unteren Registerkarten-Navigator können wir einen Beschriftungsstil

36
00:02:56,330 --> 00:02:59,000
hinzufügen. Auch dies zielt auf die Textkomponente

37
00:02:59,000 --> 00:03:03,010
ab, die unsere Beschriftung enthält. Wir können hier eine Schriftfamilie

38
00:03:03,140 --> 00:03:09,230
von OpenSans-Bold hinzufügen, damit wir den Unterschied klar erkennen können, wenn dies neu geladen wird, jetzt dies

39
00:03:09,230 --> 00:03:12,800
deutlich ist ein fetter Text. Das sieht eigentlich gar nicht so schlecht aus, also

40
00:03:12,800 --> 00:03:14,510
denke ich, dass wir das behalten können, aber

41
00:03:14,720 --> 00:03:18,920
natürlich können Sie es auch so einstellen, dass es nur ohne Sans geöffnet wird, wenn Sie eine dünnere Version möchten, aber

42
00:03:19,010 --> 00:03:22,320
jetzt würde ich unsere eigene Schriftart verwenden. Für Android

43
00:03:22,320 --> 00:03:29,600
bietet der Navigator für die untere Registerkarte des Materials hier ebenfalls einige

44
00:03:29,720 --> 00:03:31,910
Konfigurationsoptionen, jedoch keinen Beschriftungsstil.

45
00:03:31,910 --> 00:03:38,690
Was Sie dort stattdessen tun können, sind die separaten Registerkarten, die Sie laden. In den Navigationsoptionen der Registerkarten, die

46
00:03:38,690 --> 00:03:47,170
Sie laden, wo Sie auch das Symbol für die Registerkartenleiste festlegen usw. können wir dort eine Beschriftung der Registerkartenleiste hinzufügen Hier, wo wir ein Label

47
00:03:47,170 --> 00:03:54,160
wie "Mahlzeiten" setzen könnten, mehrere Erklärungszeichen, um zu überschreiben, was wir jetzt sowohl unter iOS als auch unter Android als

48
00:03:54,160 --> 00:03:54,540
Label

49
00:03:54,550 --> 00:04:00,490
verwenden, und das kann tatsächlich eine Zeichenfolge wie diese sein, aber Sie können dies auch auf eine

50
00:04:00,490 --> 00:04:07,450
React-Komponente setzen, um eine Textkomponente nämlich und dann dort können Sie Ihr Etikett, Mahlzeiten einrichten, aber natürlich können Sie jetzt

51
00:04:07,720 --> 00:04:11,490
hier Stil hinzufügen und beliebige Stile hinzufügen, die Sie wollen.

52
00:04:11,500 --> 00:04:16,120
Eine kleine Problemumgehung, da es keine andere integrierte Möglichkeit gibt, dies für den Navigator für die

53
00:04:16,120 --> 00:04:19,060
unteren Registerkarten des Materials zu gestalten, aber besser als nichts.

54
00:04:19,060 --> 00:04:25,060
Hier können wir nun die Schriftfamilie auf OpenSans-Bold setzen, und wenn wir das tun, müssen wir natürlich auch sicherstellen,

55
00:04:25,060 --> 00:04:30,240
dass wir jetzt die Textkomponente aus React Native importieren, da wir sie sonst dort unten und

56
00:04:35,760 --> 00:04:40,980
jetzt nicht verwenden können Das bekommen wir natürlich auch auf unserem iOS, weil wir die Konfiguration teilen.

57
00:04:40,980 --> 00:04:45,780
Wir werden das in einer Sekunde beheben, aber jetzt können wir auch dort unseren eigenen

58
00:04:45,810 --> 00:04:52,820
Stil einrichten, aber natürlich haben wir jetzt die Farbe verloren Dies ist der Nachteil der manuellen Einstellung hier. Da wir diese Problemumgehung

59
00:04:52,820 --> 00:04:59,930
für Android nur für die unteren Registerkarten des Materials benötigen, ist es am einfachsten, die Plattform-API zu verwenden und diese Beschriftung der Registerkartenleiste

60
00:04:59,930 --> 00:05:04,760
nur dann auf diese Textkomponente festzulegen, wenn wir ' Sie sind auf Android, da wir

61
00:05:04,760 --> 00:05:11,330
nur dann diese Problemumgehung benötigen, um die Schriftfamilie festzulegen. Also werde ich prüfen, ob wir auf Android sind,

62
00:05:11,330 --> 00:05:18,650
und wenn dies der Fall ist, werde ich hier eine Textkomponente zurückgeben, andernfalls werde ich nur die Textmahlzeiten zurückgeben, und dann

63
00:05:18,650 --> 00:05:24,710
ist der Vorteil, nur einen Text hier zurückzugeben, einfach, dass unsere andere Einstellungen, die die Farbtonfarbe und den

64
00:05:24,710 --> 00:05:30,920
Beschriftungsstil usw. festlegen, werden aktiviert und nicht überschrieben. Wenn wir unsere eigene Textkomponente festlegen, deaktivieren wir alle

65
00:05:30,920 --> 00:05:34,700
Standardfunktionen, alle diese Standardfunktionen, die im Navigator der unteren Registerkarte integriert sind.

66
00:05:34,700 --> 00:05:39,200
Das Problem mit dem Navigator für die untere Registerkarte des Materials besteht darin, dass einfach

67
00:05:39,200 --> 00:05:39,800
nicht alle

68
00:05:39,860 --> 00:05:44,690
diese Standardfunktionen integriert sind. Daher müssen wir dies überschreiben, aber wir müssen dies nur für Android tun.

69
00:05:44,780 --> 00:05:48,290
Jetzt können wir das kopieren und genau das Gleiche

70
00:05:48,290 --> 00:05:57,530
natürlich hier für Favoriten tun, Favoriten als Text auf iOS und natürlich auch in der Textkomponente für Android rendern und damit sollten wir jetzt einen Stil

71
00:05:57,590 --> 00:06:03,860
haben, der funktioniert und der gut aussieht . Unter iOS haben wir dort im Grunde

72
00:06:03,920 --> 00:06:09,740
nichts geändert und unter Android haben wir jetzt auch unsere eigenen benutzerdefinierten Schriftarten.

73
00:06:09,740 --> 00:06:12,520
Es ist also eine kleine Problemumgehung, die hier

74
00:06:12,520 --> 00:06:19,130
leider erforderlich ist, wenn Sie mit dem Navigator für die unteren Registerkarten arbeiten, aber auch nicht zu schwer zu implementieren

75
00:06:19,130 --> 00:06:24,290
sind. Damit stellen wir sicher, dass wir überall in der Navigation unsere eigene benutzerdefinierte Schriftart verwenden

76
00:06:24,800 --> 00:06:25,850
Funktionen unserer App.