1 00:00:02,210 --> 00:00:07,310 Jetzt möchte ich diese Schriftfamilie auch für den Headertitel verwenden. 2 00:00:07,310 --> 00:00:10,990 Hier in meiner Header-Komponente, im Header-Titel, möchte 3 00:00:11,000 --> 00:00:18,560 ich außerdem eine Schriftfamilie auf open-sans-fett setzen, damit wir diese auch dort verwenden. Für alle 4 00:00:20,300 --> 00:00:27,110 anderen Texte in dieser Anwendung möchte ich tatsächlich meine open verwenden ohne Schriftart. 5 00:00:27,440 --> 00:00:35,480 So haben wir zum Beispiel in den grünen Startspielen hier unseren Text, wählen eine Zahl aus und 6 00:00:35,870 --> 00:00:45,080 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 7 00:00:45,350 --> 00:00:55,900 hier bei hinzufügen unten und verwenden Sie dann die Schriftfamilie open-sans. Das funktioniert jetzt, hat aber natürlich einen 8 00:00:55,900 --> 00:00:57,450 Nachteil. 9 00:00:57,700 --> 00:01:04,810 Der Nachteil ist, dass Sie diese Schriftfamilie jetzt manuell zu jedem Text in Ihrer App hinzufügen müssen, in dem Sie 10 00:01:04,810 --> 00:01:10,980 sie verwenden möchten, und Sie müssen sie direkt zu den Textkomponenten hinzufügen. Sie können sie nicht zu 11 00:01:11,140 --> 00:01:18,880 einer Ansicht hinzufügen und beispielsweise festlegen dies auf dem Bildschirm hier und verlassen Sie sich darauf, dass dies an verschachtelte Texte weitergegeben 12 00:01:18,880 --> 00:01:21,010 wird, leider funktioniert dies nicht. 13 00:01:21,040 --> 00:01:28,120 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, 14 00:01:28,120 --> 00:01:32,340 dass dies eindeutig nicht fett ist. Wählen Sie eine Zahl, die nicht fett ist. 15 00:01:32,530 --> 00:01:38,250 Wenn Sie es also so weitergeben, wie es in CSS funktioniert, funktioniert es nicht, da es sich nicht 16 00:01:38,290 --> 00:01:45,130 um CSS handelt, sondern um Javascript. Was Sie auf ein Objekt anwenden, wird nur auf das Element angewendet, auf die Komponente, 17 00:01:45,190 --> 00:01:47,470 an die dieses Stilobjekt angehängt ist. 18 00:01:47,470 --> 00:01:52,930 Wir müssten diesen Text also einzeln formatieren, aber immer wieder, wenn Sie diesen Stil an all den verschiedenen Stellen immer 19 00:01:52,930 --> 00:01:56,760 wieder neu erstellen, ist dies möglicherweise nicht das, was Sie am Ende tun möchten. 20 00:01:57,600 --> 00:02:01,680 Es gibt zwei Problemumgehungen, oder die Problemumgehung klingt immer 21 00:02:01,680 --> 00:02:05,440 etwas schmutzig, zwei Möglichkeiten, dies eleganter zu handhaben. 22 00:02:05,460 --> 00:02:12,210 Zum einen erstellen Sie eine separate Komponente, möglicherweise eine Body-Text-Komponente oder nur eine Text-Komponente, wie auch immer 23 00:02:12,210 --> 00:02:13,920 Sie sie benennen möchten, 24 00:02:13,920 --> 00:02:19,040 und ich werde sie BodyText nennen. js und es wird eine 25 00:02:19,040 --> 00:02:27,360 sehr einfache Komponente sein, ich importiere nur React von React und ich importiere Text und Stylesheet von 26 00:02:30,250 --> 00:02:39,730 React Native hier und dann erhält die Body-Text-Komponente hier Requisiten und gibt einfach meine Textkomponente hier zurück, wo ich Requisiten 27 00:02:39,730 --> 00:02:41,650 untergeordnete Elemente ausgibt 28 00:02:41,650 --> 00:02:48,430 Text-Tags, damit wir Inhalte an Textkörper übergeben können, indem wir sie zwischen dem öffnenden 29 00:02:48,430 --> 00:02:52,500 und schließenden Texttext-Tag übergeben, wenn wir diese Komponente verwenden. 30 00:02:52,510 --> 00:02:56,570 Dann habe ich hier meine Stile und dort verwende ich Stylesheet. Erstellen und natürlich exportiere ich diese 31 00:02:56,950 --> 00:03:01,390 Komponente wie folgt und jetzt hier in diesem Stylesheet setze ich einfach 32 00:03:01,390 --> 00:03:07,370 einen Stil, den ich hier auf diesen Text, Styles Body oder was auch immer Sie ihn benennen 33 00:03:08,650 --> 00:03:09,590 möchten, 34 00:03:09,820 --> 00:03:12,680 an, habe den Body Style hier und den 35 00:03:12,910 --> 00:03:19,060 einen Style I. set is font family open sans und ich werde vorerst fett verwenden, damit wir 36 00:03:19,060 --> 00:03:20,110 sehen können, dass 37 00:03:20,170 --> 00:03:25,890 dies wirklich einen Effekt hat, bevor ich es auf etwas schwerer zu erkennen ändere, open sans, 38 00:03:25,900 --> 00:03:31,900 also open-sans-fett und jetzt ist es so Eine sehr einfache Komponente, nur ein dünner Wrapper um den 39 00:03:31,960 --> 00:03:34,360 normalen Text, aber ein dünner Wrapper, 40 00:03:34,420 --> 00:03:39,640 der immer diese Schriftfamilie festlegt. Dies bedeutet, dass wir immer dann Text haben möchten, 41 00:03:39,640 --> 00:03:46,780 der diese eine Familie verwendet, möglicherweise an allen Stellen in der App, anstatt sie zu verwenden Als normale Textkomponente von 42 00:03:46,780 --> 00:03:52,920 React Native verwenden wir nur die gerade erstellte Textstrukturkomponente. Ich kann also Text aus Komponenten BodyText 43 00:03:53,890 --> 00:04:01,630 importieren, diese Komponente importieren und jetzt kann ich einfach die Textkomponente hier durch Text ersetzen. Wenn wir das tun und dies 44 00:04:01,630 --> 00:04:06,830 speichern, sehen wir natürlich, dass dies jetzt fett ist, na wenn ich hätte es 45 00:04:07,090 --> 00:04:12,640 für den richtigen Text verwendet, dies ist natürlich der vom Benutzer ausgewählte Text, es ist 46 00:04:12,640 --> 00:04:17,670 auch dort in Ordnung, aber ich möchte hier hingehen, um die Nummer auszuwählen. 47 00:04:17,740 --> 00:04:23,800 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 48 00:04:23,800 --> 00:04:30,850 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 49 00:04:31,240 --> 00:04:33,370 es sich um eine andere Schriftart handelt. 50 00:04:33,400 --> 00:04:40,240 Dies ist also die Option, einen Textstil oder eine Schriftfamilie weiterzugeben. Sie erstellen einfach eine eigene 51 00:04:40,240 --> 00:04:45,250 Textkomponente, die immer diese Schriftfamilie enthält. Wenn Sie mehrere verschiedene Schriftfamilien wie 52 00:04:45,250 --> 00:04:49,670 einen Titel und eine Überschrift haben, erstellen Sie separate Komponenten. 53 00:04:49,790 --> 00:04:55,960 Zum Beispiel haben wir hier einen Titel, den wir vielleicht auch in anderen Teilen der App verwenden möchten. So können 54 00:04:55,960 --> 00:05:02,500 wir einen TitleText hinzufügen. js-Datei, die im Grunde das ist, was wir im 55 00:05:02,500 --> 00:05:09,700 Text haben, also kopiere ich sie einfach und verschiebe sie in den Titeltext. Dann haben wir hier den Namen des 56 00:05:09,910 --> 00:05:12,980 Titeltextes und hier ist es der Titeltext und dort 57 00:05:12,980 --> 00:05:19,510 verwenden wir open-sans- fett und vielleicht für den Titel, haben auch eine Schriftgröße von 18 und jetzt noch 58 00:05:19,530 --> 00:05:26,010 einmal, lassen Sie uns dies vielleicht in Titel umbenennen, macht mehr Sinn für die Stil-Requisite, aber jetzt wieder 59 00:05:26,010 --> 00:05:34,110 haben wir einen sehr dünnen Wrapper um den Text und an allen Stellen, wo Wir brauchen den Titel, wie zum Beispiel in der 60 00:05:34,110 --> 00:05:43,340 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, 61 00:05:43,340 --> 00:05:47,450 um diesen Stil zu entfernen Zuweisung hier, so und machen Sie 62 00:05:47,690 --> 00:05:51,520 das gleiche im Startbildschirm. Dort kann dieser Text 63 00:05:51,560 --> 00:05:54,750 jetzt Titeltext sein. Ich muss ihn nur 64 00:05:54,920 --> 00:05:57,860 noch importieren. Lassen Sie mich also 65 00:05:57,860 --> 00:06:06,500 den Titeltext aus dem Komponentenordner und dort aus dem Titeltext importieren, und wir können diesen jetzt wiederverwenden und genau wie zuvor mit 66 00:06:06,500 --> 00:06:12,980 der Karte, wenn Sie möchten, dass dieser weiterhin anpassbar ist, damit wir mehr festlegen können den 67 00:06:12,980 --> 00:06:18,740 Titel oder die Schriftgröße überschreiben oder einen Rand hinzufügen, wie wir es hier tun. 68 00:06:18,770 --> 00:06:25,440 Nun, was Sie immer tun können, ist, dass Sie dem Titeltext hier immer noch Stil hinzufügen können, 69 00:06:25,530 --> 00:06:32,080 siehe Stiltitel, also den Titelstil, den ich habe Dort unten im Startbildschirm und innerhalb der Titeltextkomponente müssen 70 00:06:32,080 --> 00:06:37,270 Sie nur sicherstellen, dass Sie diese eingehenden Stile mit den dort eingerichteten Stilen 71 00:06:37,270 --> 00:06:38,240 zusammenführen. 72 00:06:38,260 --> 00:06:47,680 Hier zeigt style jetzt auf ein Objekt, in dem Sie alle Werte in den hier eingerichteten Titeln übernehmen und sie dann zusammenführen 73 00:06:47,680 --> 00:06:53,510 oder mit allen im Requisitenstil festgelegten Werten überschreiben. Jetzt haben Sie eine anpassbare Textebene, 74 00:06:53,620 --> 00:07:00,190 die diese Standardstile festlegt aber das kann überschrieben und an Ihre Anforderungen angepasst werden und 75 00:07:00,190 --> 00:07:01,990 daher haben wir 76 00:07:01,990 --> 00:07:06,330 das gleiche Aussehen wie zuvor, aber jetzt mit mehr Benutzerfreundlichkeit. 77 00:07:06,340 --> 00:07:08,730 Nun noch einmal, das ist Option Nummer eins. 78 00:07:08,740 --> 00:07:15,700 Die Alternative dazu wäre, dass Sie beispielsweise im Konstantenordner Ihre Standardstile haben. js-Datei oder wie auch immer Sie 79 00:07:15,720 --> 00:07:18,070 sie benennen möchten 80 00:07:18,310 --> 00:07:26,770 und dort exportieren Sie ein Standard-Stylesheet und müssen dieses importieren. Importieren Sie daher ein 81 00:07:26,770 --> 00:07:29,530 Stylesheet aus React Native. 82 00:07:32,240 --> 00:07:43,590 Sie exportieren Ihr Standard-Stylesheet. Erstellen Sie ein Objekt und richten Sie dort wie Ihren Körpertext beispielsweise einen beliebigen Namen ein. Hier 83 00:07:44,070 --> 00:07:45,100 legen Sie 84 00:07:45,150 --> 00:07:50,910 eine Schriftfamilie fest, öffnen Sans und möglicherweise nur vorübergehend, damit wir sehen können, ob dies funktioniert, und geben 85 00:07:50,910 --> 00:07:52,520 Sie ihm eine rote Farbe. 86 00:07:52,680 --> 00:07:55,480 Jetzt können Sie dies in verschiedene 87 00:07:55,680 --> 00:08:07,630 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, 88 00:08:07,670 --> 00:08:11,070 zum Beispiel hier, raten die Gegner, na 89 00:08:11,090 --> 00:08:12,930 dann Alles, was wir 90 00:08:13,160 --> 00:08:19,340 tun, ist, den Stil hier festzulegen, auf Standardstile zuzugreifen und auf Text zu 91 00:08:19,340 --> 00:08:23,440 zeigen. Wenn Sie jetzt ein Spiel starten, wird dieser 92 00:08:23,450 --> 00:08:25,200 Text rot. 93 00:08:25,370 --> 00:08:29,360 Wenn wir dieses Spiel starten, ist die Vermutung des Gegners rot. 94 00:08:29,390 --> 00:08:35,360 Dies wäre also eine Alternative zu separaten Komponenten, da Sie einfach ein global verwaltetes Stylesheet haben, das 95 00:08:35,360 --> 00:08:38,470 Sie in verschiedene Dateien importieren, und jetzt brauche ich 96 00:08:38,680 --> 00:08:44,760 nicht wirklich einen roten Text, aber was ich will, ist ein Titel und da Ich möchte eine Schriftfamilie 97 00:08:44,780 --> 00:08:52,730 mit offener Schrift ohne Fettdruck und einer Schriftgröße von beispielsweise 18 haben. Ja, ich habe die gleiche Einstellung im Titeltext. Ich erstelle sie 98 00:08:52,970 --> 00:08:55,320 hier neu, um beide Alternativen anzuzeigen, 99 00:08:55,340 --> 00:09:01,010 da jetzt mit Wenn der Titel im Standard-Stylesheet so eingerichtet ist, können wir jetzt zum Spielbildschirm 100 00:09:01,010 --> 00:09:06,920 gehen und hören, dass wir nicht den Text verwenden, sondern den Titel für die Vermutung des Gegners 101 00:09:07,250 --> 00:09:13,610 verwenden. Das Ergebnis ist, dass wir dieses Spiel neu starten, wenn wir es jetzt neu starten habe diesen schönen 102 00:09:13,610 --> 00:09:14,630 Titel hier. 103 00:09:14,660 --> 00:09:19,670 Das ist also eine gültige Alternative, und es liegt an Ihnen, welche Sie bevorzugen, 104 00:09:19,670 --> 00:09:25,560 separate Komponenten, die Sie anstelle der Textkomponente oder der Textkomponente mit einem global verwalteten Stil wiederverwenden, und 105 00:09:25,760 --> 00:09:31,460 als Randnotiz, in diesem global verwalteten Stil sind Sie Natürlich können Sie hier keine beliebigen Schriftarten 106 00:09:31,460 --> 00:09:37,490 verwalten. Sie können hier beliebige Stile verwalten. Daher können alle Stile, die Sie für mehrere 107 00:09:37,490 --> 00:09:43,940 Komponenten freigeben möchten, in einem solchen globalen Stylesheet verwaltet werden. Dies können allgemeine Layout-Setups sein, Farben, beliebige Farben, 108 00:09:43,940 --> 00:09:50,900 aber normalerweise müssen Sie immer die Option wählen, separate Komponenten wie die zu erstellen Kartenkomponente, die ein Wrapper um 109 00:09:50,900 --> 00:09:55,790 die Ansicht oder den Textkörper oder den Titeltext ist, die auch nur Wrapper 110 00:09:55,790 --> 00:10:01,400 sind, die hier in einem globalen Stylesheet etwas Styling hinzufügen oder verwalten, liegt ganz bei Ihnen, 111 00:10:01,400 --> 00:10:02,780 was Sie bevorzugen. 112 00:10:02,780 --> 00:10:07,910 Ich persönlich habe den komponentengesteuerten Ansatz bevorzugt, da es bei React letztendlich nur um Komponenten geht. 113 00:10:08,180 --> 00:10:13,280 Daher denke ich, dass wir auf diese Weise ein bisschen näher an der Standard-React-Welt bleiben, aber 114 00:10:13,310 --> 00:10:20,430 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. 115 00:10:20,540 --> 00:10:25,330 Vielleicht haben Sie manchmal etwas, bei dem eine separate Komponente nicht wirklich sinnvoll ist. Verwalten 116 00:10:25,350 --> 00:10:31,070 Sie sie dann in einem globalen Stil. In anderen Fällen ist eine benutzerdefinierte Komponente möglicherweise sinnvoller als mit einem 117 00:10:31,070 --> 00:10:32,180 globalen Stil Setup.