Daher möchte ich mit einer Feinabstimmung der Schriftarten in meinen Registerkarten hier, in der Kopfzeile und auch im
Text hier in all meinen Rezepten beginnen. Ich möchte sicherstellen, dass ich überall die richtige Schriftart verwende, meine eigenen
benutzerdefinierten Schriftarten, und insbesondere hier, in der Kopfzeile, in den Registerkarten, stellen wir dies noch nicht wirklich sicher.
Natürlich ist es relativ einfach,
dies sicherzustellen, und wir beginnen mit dem Header. Der Header ist im Allgemeinen wie die Hintergrundfarbe mit unseren Standardnavigationsoptionen
gestaltet, die wir immer rechts im Stapelnavigator eingerichtet haben.
Die Standardnavigationsoptionen hier ermöglichen es uns, den Header zu formatieren und beispielsweise dem Header im Allgemeinen einen Stil und
zu geben Fügen Sie eine Hintergrundfarbe hinzu.
Hier ist es wichtig zu erkennen, dass der Header-Stil wirklich nur auf das Feld abzielt, sozusagen auf
den Hintergrund, also auf den Container, in dem sich die Aktionselemente, die Zurück-Schaltfläche und dieser Titel befinden. Der Titel selbst kann
jedoch nicht mit dem Header-Stil ausgerichtet
werden Natürlich bekommen wir eine Alternative dazu. Neben dem Header-Stil, in dem wir diesen Header-Container
formatieren können, haben wir auch einen Header-Titelstil, der nicht überraschend auf die Textkomponente abzielt, in der unser Header-Titel
dargestellt wird, und dort können wir ihn so formatieren, wie wir beispielsweise Textelemente in React Native formatieren können Durch
Hinzufügen einer Schriftfamilie von Open Sans verwende ich wieder die nicht
fett gedruckte Version, damit wir den Unterschied schnell erkennen können.
Dies ist eindeutig nicht mehr fett, denke ich, es ist ziemlich klar zu sehen, besonders hier unter iOS, und jetzt, wenn ich
dies auf fett stelle, stelle ich sicher, dass ich diesen richtigen Stil sowohl
auf iOS als auch auf Android verwende. Für den hinteren Text hier können wir übrigens auch diesen
Standard überschreiben, bei dem es sich um die Standard-Systemschriftart handelt, indem wir den Titelstil des Header-Back-Titels festlegen. Dies ist eine separate
Einstellung,
die wir hier und da festlegen können. Wir können auch die Schriftfamilie festlegen Sagen wir Open
Sans, nicht die fette Version. Ich
möchte das nicht im fetten Stil haben, aber ich möchte es in meiner eigenen Schrift haben. Dies sollte jetzt
hier ohne Sans sein und meine eigene Schrift verwenden. Auf Android hat dies natürlich keine Auswirkung, da
wir dort keinen Rücktext haben. Das ist eine Sache,
das ist der Header, für die Registerkarten ist es ziemlich ähnlich. Dort können wir zu unserem Tab-Navigator gehen, den wir erstellen,
wie zum Beispiel
zum
unteren Tab-Navigator des Materials. Dieser hat natürlich unsere tabScreenConfig und dann dieses zweite Objekt, in dem wir den
Navigator selbst
konfigurieren, und wie immer in der React-Navigation ist es das zweite Objekt,
in dem wir uns befinden kann das allgemeine Erscheinungsbild der navigatorspezifischen Dinge steuern, wie im
Fall des Registerkartennavigators, der Farbe des Registerkartensymbols, der Balkenfarbe, der Farbtonfarbe oder auch des Beschriftungsstils und in der Tat hier auf der
Registerkartenleiste Optionen für die Im unteren Registerkarten-Navigator können wir einen Beschriftungsstil
hinzufügen. Auch dies zielt auf die Textkomponente
ab, die unsere Beschriftung enthält. Wir können hier eine Schriftfamilie
von OpenSans-Bold hinzufügen, damit wir den Unterschied klar erkennen können, wenn dies neu geladen wird, jetzt dies
deutlich ist ein fetter Text. Das sieht eigentlich gar nicht so schlecht aus, also
denke ich, dass wir das behalten können, aber
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
jetzt würde ich unsere eigene Schriftart verwenden. Für Android
bietet der Navigator für die untere Registerkarte des Materials hier ebenfalls einige
Konfigurationsoptionen, jedoch keinen Beschriftungsstil.
Was Sie dort stattdessen tun können, sind die separaten Registerkarten, die Sie laden. In den Navigationsoptionen der Registerkarten, die
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
wie "Mahlzeiten" setzen könnten, mehrere Erklärungszeichen, um zu überschreiben, was wir jetzt sowohl unter iOS als auch unter Android als
Label
verwenden, und das kann tatsächlich eine Zeichenfolge wie diese sein, aber Sie können dies auch auf eine
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
hier Stil hinzufügen und beliebige Stile hinzufügen, die Sie wollen.
Eine kleine Problemumgehung, da es keine andere integrierte Möglichkeit gibt, dies für den Navigator für die
unteren Registerkarten des Materials zu gestalten, aber besser als nichts.
Hier können wir nun die Schriftfamilie auf OpenSans-Bold setzen, und wenn wir das tun, müssen wir natürlich auch sicherstellen,
dass wir jetzt die Textkomponente aus React Native importieren, da wir sie sonst dort unten und
jetzt nicht verwenden können Das bekommen wir natürlich auch auf unserem iOS, weil wir die Konfiguration teilen.
Wir werden das in einer Sekunde beheben, aber jetzt können wir auch dort unseren eigenen
Stil einrichten, aber natürlich haben wir jetzt die Farbe verloren Dies ist der Nachteil der manuellen Einstellung hier. Da wir diese Problemumgehung
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
nur dann auf diese Textkomponente festzulegen, wenn wir ' Sie sind auf Android, da wir
nur dann diese Problemumgehung benötigen, um die Schriftfamilie festzulegen. Also werde ich prüfen, ob wir auf Android sind,
und wenn dies der Fall ist, werde ich hier eine Textkomponente zurückgeben, andernfalls werde ich nur die Textmahlzeiten zurückgeben, und dann
ist der Vorteil, nur einen Text hier zurückzugeben, einfach, dass unsere andere Einstellungen, die die Farbtonfarbe und den
Beschriftungsstil usw. festlegen, werden aktiviert und nicht überschrieben. Wenn wir unsere eigene Textkomponente festlegen, deaktivieren wir alle
Standardfunktionen, alle diese Standardfunktionen, die im Navigator der unteren Registerkarte integriert sind.
Das Problem mit dem Navigator für die untere Registerkarte des Materials besteht darin, dass einfach
nicht alle
diese Standardfunktionen integriert sind. Daher müssen wir dies überschreiben, aber wir müssen dies nur für Android tun.
Jetzt können wir das kopieren und genau das Gleiche
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
haben, der funktioniert und der gut aussieht . Unter iOS haben wir dort im Grunde
nichts geändert und unter Android haben wir jetzt auch unsere eigenen benutzerdefinierten Schriftarten.
Es ist also eine kleine Problemumgehung, die hier
leider erforderlich ist, wenn Sie mit dem Navigator für die unteren Registerkarten arbeiten, aber auch nicht zu schwer zu implementieren
sind. Damit stellen wir sicher, dass wir überall in der Navigation unsere eigene benutzerdefinierte Schriftart verwenden
Funktionen unserer App.