Jetzt möchte ich diese Schriftfamilie auch für den Headertitel verwenden.
Hier in meiner Header-Komponente, im Header-Titel, möchte
ich außerdem eine Schriftfamilie auf open-sans-fett setzen, damit wir diese auch dort verwenden. Für alle
anderen Texte in dieser Anwendung möchte ich tatsächlich meine open verwenden ohne Schriftart.
So haben wir zum Beispiel in den grünen Startspielen hier unseren Text, wählen eine Zahl aus und
um die normale Open-Sans-Schriftart zu verwenden, können wir dort natürlich einen Stil zuweisen und dann beispielsweise Stile-Text verwenden und diesen Textstil
hier bei hinzufügen unten und verwenden Sie dann die Schriftfamilie open-sans. Das funktioniert jetzt, hat aber natürlich einen
Nachteil.
Der Nachteil ist, dass Sie diese Schriftfamilie jetzt manuell zu jedem Text in Ihrer App hinzufügen müssen, in dem Sie
sie verwenden möchten, und Sie müssen sie direkt zu den Textkomponenten hinzufügen. Sie können sie nicht zu
einer Ansicht hinzufügen und beispielsweise festlegen dies auf dem Bildschirm hier und verlassen Sie sich darauf, dass dies an verschachtelte Texte weitergegeben
wird, leider funktioniert dies nicht.
Wenn ich also hier zum Bildschirm gehen und die Schriftfamilie auf open-sans-fett setzen würde, damit wir leicht sehen können, ob es funktioniert oder nicht, sehen Sie,
dass dies eindeutig nicht fett ist. Wählen Sie eine Zahl, die nicht fett ist.
Wenn Sie es also so weitergeben, wie es in CSS funktioniert, funktioniert es nicht, da es sich nicht
um CSS handelt, sondern um Javascript. Was Sie auf ein Objekt anwenden, wird nur auf das Element angewendet, auf die Komponente,
an die dieses Stilobjekt angehängt ist.
Wir müssten diesen Text also einzeln formatieren, aber immer wieder, wenn Sie diesen Stil an all den verschiedenen Stellen immer
wieder neu erstellen, ist dies möglicherweise nicht das, was Sie am Ende tun möchten.
Es gibt zwei Problemumgehungen, oder die Problemumgehung klingt immer
etwas schmutzig, zwei Möglichkeiten, dies eleganter zu handhaben.
Zum einen erstellen Sie eine separate Komponente, möglicherweise eine Body-Text-Komponente oder nur eine Text-Komponente, wie auch immer
Sie sie benennen möchten,
und ich werde sie BodyText nennen. js und es wird eine
sehr einfache Komponente sein, ich importiere nur React von React und ich importiere Text und Stylesheet von
React Native hier und dann erhält die Body-Text-Komponente hier Requisiten und gibt einfach meine Textkomponente hier zurück, wo ich Requisiten
untergeordnete Elemente ausgibt
Text-Tags, damit wir Inhalte an Textkörper übergeben können, indem wir sie zwischen dem öffnenden
und schließenden Texttext-Tag übergeben, wenn wir diese Komponente verwenden.
Dann habe ich hier meine Stile und dort verwende ich Stylesheet. Erstellen und natürlich exportiere ich diese
Komponente wie folgt und jetzt hier in diesem Stylesheet setze ich einfach
einen Stil, den ich hier auf diesen Text, Styles Body oder was auch immer Sie ihn benennen
möchten,
an, habe den Body Style hier und den
einen Style I. set is font family open sans und ich werde vorerst fett verwenden, damit wir
sehen können, dass
dies wirklich einen Effekt hat, bevor ich es auf etwas schwerer zu erkennen ändere, open sans,
also open-sans-fett und jetzt ist es so Eine sehr einfache Komponente, nur ein dünner Wrapper um den
normalen Text, aber ein dünner Wrapper,
der immer diese Schriftfamilie festlegt. Dies bedeutet, dass wir immer dann Text haben möchten,
der diese eine Familie verwendet, möglicherweise an allen Stellen in der App, anstatt sie zu verwenden Als normale Textkomponente von
React Native verwenden wir nur die gerade erstellte Textstrukturkomponente. Ich kann also Text aus Komponenten BodyText
importieren, diese Komponente importieren und jetzt kann ich einfach die Textkomponente hier durch Text ersetzen. Wenn wir das tun und dies
speichern, sehen wir natürlich, dass dies jetzt fett ist, na wenn ich hätte es
für den richtigen Text verwendet, dies ist natürlich der vom Benutzer ausgewählte Text, es ist
auch dort in Ordnung, aber ich möchte hier hingehen, um die Nummer auszuwählen.
Wenn ich es also dort verwende, den Textkörper, diesen Text umbrechen, sehen Sie, dass dies fett ist, und jetzt können wir auch zurückgehen
und unserem Textkörper den tatsächlich beabsichtigten offenen Sans-Look geben, der immer noch nicht die Standardschrift ist, aber der kann. Es ist nicht sofort zu sehen, dass
es sich um eine andere Schriftart handelt.
Dies ist also die Option, einen Textstil oder eine Schriftfamilie weiterzugeben. Sie erstellen einfach eine eigene
Textkomponente, die immer diese Schriftfamilie enthält. Wenn Sie mehrere verschiedene Schriftfamilien wie
einen Titel und eine Überschrift haben, erstellen Sie separate Komponenten.
Zum Beispiel haben wir hier einen Titel, den wir vielleicht auch in anderen Teilen der App verwenden möchten. So können
wir einen TitleText hinzufügen. js-Datei, die im Grunde das ist, was wir im
Text haben, also kopiere ich sie einfach und verschiebe sie in den Titeltext. Dann haben wir hier den Namen des
Titeltextes und hier ist es der Titeltext und dort
verwenden wir open-sans- fett und vielleicht für den Titel, haben auch eine Schriftgröße von 18 und jetzt noch
einmal, lassen Sie uns dies vielleicht in Titel umbenennen, macht mehr Sinn für die Stil-Requisite, aber jetzt wieder
haben wir einen sehr dünnen Wrapper um den Text und an allen Stellen, wo Wir brauchen den Titel, wie zum Beispiel in der
Kopfzeile. Wir können diese manuelle Stilzuweisung hier in der Kopfzeilenkomponente entfernen und stattdessen einfach unseren Titeltext aus der Titeltextkomponente importieren und diesen anstelle von Text verwenden,
um diesen Stil zu entfernen Zuweisung hier, so und machen Sie
das gleiche im Startbildschirm. Dort kann dieser Text
jetzt Titeltext sein. Ich muss ihn nur
noch importieren. Lassen Sie mich also
den Titeltext aus dem Komponentenordner und dort aus dem Titeltext importieren, und wir können diesen jetzt wiederverwenden und genau wie zuvor mit
der Karte, wenn Sie möchten, dass dieser weiterhin anpassbar ist, damit wir mehr festlegen können den
Titel oder die Schriftgröße überschreiben oder einen Rand hinzufügen, wie wir es hier tun.
Nun, was Sie immer tun können, ist, dass Sie dem Titeltext hier immer noch Stil hinzufügen können,
siehe Stiltitel, also den Titelstil, den ich habe Dort unten im Startbildschirm und innerhalb der Titeltextkomponente müssen
Sie nur sicherstellen, dass Sie diese eingehenden Stile mit den dort eingerichteten Stilen
zusammenführen.
Hier zeigt style jetzt auf ein Objekt, in dem Sie alle Werte in den hier eingerichteten Titeln übernehmen und sie dann zusammenführen
oder mit allen im Requisitenstil festgelegten Werten überschreiben. Jetzt haben Sie eine anpassbare Textebene,
die diese Standardstile festlegt aber das kann überschrieben und an Ihre Anforderungen angepasst werden und
daher haben wir
das gleiche Aussehen wie zuvor, aber jetzt mit mehr Benutzerfreundlichkeit.
Nun noch einmal, das ist Option Nummer eins.
Die Alternative dazu wäre, dass Sie beispielsweise im Konstantenordner Ihre Standardstile haben. js-Datei oder wie auch immer Sie
sie benennen möchten
und dort exportieren Sie ein Standard-Stylesheet und müssen dieses importieren. Importieren Sie daher ein
Stylesheet aus React Native.
Sie exportieren Ihr Standard-Stylesheet. Erstellen Sie ein Objekt und richten Sie dort wie Ihren Körpertext beispielsweise einen beliebigen Namen ein. Hier
legen Sie
eine Schriftfamilie fest, öffnen Sans und möglicherweise nur vorübergehend, damit wir sehen können, ob dies funktioniert, und geben
Sie ihm eine rote Farbe.
Jetzt können Sie dies in verschiedene
Dateien importieren, sagen wir auf dem Spielbildschirm, dort können wir jetzt Standardstile aus dem Konstantenordner importieren und dort Standardstile und wenn wir jetzt diesen Standardtextstil wollen,
zum Beispiel hier, raten die Gegner, na
dann Alles, was wir
tun, ist, den Stil hier festzulegen, auf Standardstile zuzugreifen und auf Text zu
zeigen. Wenn Sie jetzt ein Spiel starten, wird dieser
Text rot.
Wenn wir dieses Spiel starten, ist die Vermutung des Gegners rot.
Dies wäre also eine Alternative zu separaten Komponenten, da Sie einfach ein global verwaltetes Stylesheet haben, das
Sie in verschiedene Dateien importieren, und jetzt brauche ich
nicht wirklich einen roten Text, aber was ich will, ist ein Titel und da Ich möchte eine Schriftfamilie
mit offener Schrift ohne Fettdruck und einer Schriftgröße von beispielsweise 18 haben. Ja, ich habe die gleiche Einstellung im Titeltext. Ich erstelle sie
hier neu, um beide Alternativen anzuzeigen,
da jetzt mit Wenn der Titel im Standard-Stylesheet so eingerichtet ist, können wir jetzt zum Spielbildschirm
gehen und hören, dass wir nicht den Text verwenden, sondern den Titel für die Vermutung des Gegners
verwenden. Das Ergebnis ist, dass wir dieses Spiel neu starten, wenn wir es jetzt neu starten habe diesen schönen
Titel hier.
Das ist also eine gültige Alternative, und es liegt an Ihnen, welche Sie bevorzugen,
separate Komponenten, die Sie anstelle der Textkomponente oder der Textkomponente mit einem global verwalteten Stil wiederverwenden, und
als Randnotiz, in diesem global verwalteten Stil sind Sie Natürlich können Sie hier keine beliebigen Schriftarten
verwalten. Sie können hier beliebige Stile verwalten. Daher können alle Stile, die Sie für mehrere
Komponenten freigeben möchten, in einem solchen globalen Stylesheet verwaltet werden. Dies können allgemeine Layout-Setups sein, Farben, beliebige Farben,
aber normalerweise müssen Sie immer die Option wählen, separate Komponenten wie die zu erstellen Kartenkomponente, die ein Wrapper um
die Ansicht oder den Textkörper oder den Titeltext ist, die auch nur Wrapper
sind, die hier in einem globalen Stylesheet etwas Styling hinzufügen oder verwalten, liegt ganz bei Ihnen,
was Sie bevorzugen.
Ich persönlich habe den komponentengesteuerten Ansatz bevorzugt, da es bei React letztendlich nur um Komponenten geht.
Daher denke ich, dass wir auf diese Weise ein bisschen näher an der Standard-React-Welt bleiben, aber
es ist auch keine Entscheidung, bei der Sie immer Pfad A folgen müssen oder Pfad B, Sie können diese Konzepte mischen und anpassen.
Vielleicht haben Sie manchmal etwas, bei dem eine separate Komponente nicht wirklich sinnvoll ist. Verwalten
Sie sie dann in einem globalen Stil. In anderen Fällen ist eine benutzerdefinierte Komponente möglicherweise sinnvoller als mit einem
globalen Stil Setup.