1 00:00:02,320 --> 00:00:08,220 Nachdem das Bild hinzugefügt wurde und wir hier bereits über dem Bildschirm an dem Spiel arbeiten, können wir 2 00:00:08,230 --> 00:00:11,280 diesen Text, den wir hier unten sehen, 3 00:00:11,280 --> 00:00:15,640 fein abstimmen. Machen wir ihn ein bisschen schöner, ein bisschen schöner und zusätzlich 4 00:00:15,760 --> 00:00:21,400 vorher Wenn ich das mache, wechsle ich tatsächlich von der Verwendung des Netzwerk-Images zum lokalen Image, aber 5 00:00:21,400 --> 00:00:24,850 das liegt natürlich ganz bei Ihnen, was Sie dort bevorzugen. 6 00:00:24,850 --> 00:00:29,890 Ich möchte hier also an dem Text arbeiten und anstatt nur diese Art von tabellarischem Text hier zu 7 00:00:29,930 --> 00:00:32,560 haben, der nur einige Informationen auf langweilige Weise ausgibt, warum 8 00:00:32,560 --> 00:00:37,460 präsentieren wir dies nicht in einer schöneren Wartezeit? Im Detail denke ich, es wäre schöner, 9 00:00:37,600 --> 00:00:43,030 wenn wir hier einen von Menschen lesbaren Text hätten, also einen echten Satz, den wir lesen können. 10 00:00:43,400 --> 00:00:52,720 Dort könnten wir also sagen, dass Ihr Telefon benötigt wird, und dann haben wir hier die Anzahl der Runden, Runden, um die Nummer zu erraten, 11 00:00:52,800 --> 00:00:55,140 und hier würde die Nummer eingegeben. 12 00:00:55,240 --> 00:00:59,810 Die Nummer ist natürlich die Requisitenbenutzernummer, und Sie können diese Zeile jetzt wieder entfernen, 13 00:00:59,950 --> 00:01:05,260 aber ich möchte nicht nur die Requisitennutzernummer wie diese ausgeben, sondern sie hervorheben, sondern ihr eine 14 00:01:05,260 --> 00:01:11,680 spezielle Farbe geben Das ist anders als die andere Farbe hier und das gleiche hier für die Runden, also wäre 15 00:01:11,690 --> 00:01:19,480 die Anzahl der Requisitenrunden schön, wenn das auch anders gefärbt wäre. Um dies nun anders zu färben, können 16 00:01:19,480 --> 00:01:28,150 wir dies hier tatsächlich in einen anderen Textknoten einbinden. Sie können also Textknoten, Textkomponenten innerhalb von 17 00:01:28,150 --> 00:01:32,920 Text, innerhalb anderer Textkomponenten haben, so dass 18 00:01:32,920 --> 00:01:36,820 dies einfach so möglich ist. 19 00:01:36,820 --> 00:01:38,970 Nun, das ist wirklich wichtig 20 00:01:38,970 --> 00:01:45,790 zu verstehen. Sie können Textkomponenten in andere Textkomponenten verschachteln und bedenken, dass Körpertext am Ende nur eine Textkomponente ist. 21 00:01:45,790 --> 00:01:51,080 Körpertext ist eine Komponente, die einfach die eingebaute Textkomponente zurückgibt, also alles, was wir 22 00:01:51,160 --> 00:01:57,100 tun Die Eingabe zwischen Textkörper ist die gleiche, als ob wir sie zwischen den integrierten Textkomponenten 23 00:01:57,100 --> 00:02:03,430 eingeben würden. Daher können wir dort verschachtelten Text und theoretisch auch verschachtelte Ansichten haben, aber es gibt 24 00:02:03,430 --> 00:02:08,800 einige Einschränkungen, und daher, wenn Sie Sie haben nicht unbedingt einen starken Grund, warum Sie 25 00:02:08,800 --> 00:02:14,370 dort eine Ansicht benötigen würden. Sie sollten Ansichten nicht wirklich in Text verschachteln, und es 26 00:02:14,370 --> 00:02:20,020 gibt selten einen Grund, dies zu tun. Text innerhalb von Text kann jedoch sehr sinnvoll 27 00:02:20,020 --> 00:02:25,310 sein, da Sie damit Teile eines Textes anders als den Rest des Textes gestalten können. 28 00:02:25,360 --> 00:02:32,970 Hier möchte ich zum Beispiel Stil mit Stilen hinzufügen. Hervorheben und das Gleiche hier für den zweiten Text, 29 00:02:33,210 --> 00:02:40,170 um diesen Teil des Textes hervorzuheben. Jetzt können wir natürlich dort unten in unserem Stylesheet im Spiel 30 00:02:40,170 --> 00:02:48,510 über dem Bildschirm Hervorheben hinzufügen, hervorheben und dort beispielsweise eine Farbe geben, in der wir Farben und verwenden Dazu müssen wir 31 00:02:48,530 --> 00:02:55,010 den Import hinzufügen, bei dem wir Farben aus Konstanten / Farben importieren, und dann möglicherweise unsere 32 00:02:55,010 --> 00:03:02,420 Primärfarbe dort verwenden, also Farben. primär. Wenn wir das tun, werden Sie sehen, dass dies jetzt hervorgehoben wird. 33 00:03:03,440 --> 00:03:09,350 Jetzt auch etwas Interessantes, wenn ich vorübergehend zum Textkörper gehe und diesen hier in fett 34 00:03:09,350 --> 00:03:10,210 ohne Fett 35 00:03:10,490 --> 00:03:17,150 ändere, also die fett gedruckte Version verwende, werden Sie feststellen, dass selbst der hervorgehobene Text noch fett ist 36 00:03:17,150 --> 00:03:23,570 und möglicherweise etwas schwer zu erkennen ist Aber das ist eigentlich fett und das ist sehr interessant, 37 00:03:23,870 --> 00:03:30,860 weil ich zu Beginn des Kurses erwähnt habe, dass Ihre Stile nicht erben würden. Wenn Sie beispielsweise im Spiel 38 00:03:30,860 --> 00:03:39,170 über dem Bildschirm eine Schriftfamilie hier auf Ihrem Bildschirmstil festlegen, auf die angewendet wird Die Ansicht, die alles umschließt, diese Schriftfamilie wird nicht 39 00:03:39,470 --> 00:03:42,970 an Komponenten weitergegeben, die in dieser Ansicht verschachtelt sind. 40 00:03:42,980 --> 00:03:48,490 Nur weil Sie hier in dieser Ansicht einen Stil festlegen, bedeutet dies nicht, dass alle anderen Ansichten dort oder alle anderen 41 00:03:48,490 --> 00:03:54,080 Texte dort, was auch immer es ist, dieselben Stile erhalten. Die Stile, die Sie auf eine Komponente anwenden, 42 00:03:54,080 --> 00:04:00,780 werden immer nur auf diese Komponente und nicht auf verschachtelte Komponenten angewendet, und dennoch unterscheidet sie sich für den Text. 43 00:04:00,780 --> 00:04:09,050 Dort, dieser Text hier, der hervorgehobene Text, der im Körpertext verschachtelt ist, erhält auch diese fette Familie, wenn wir ihn im Körpertext ändern, 44 00:04:09,260 --> 00:04:10,160 und das 45 00:04:10,250 --> 00:04:16,550 ist einfach ein wichtiger Unterschied, den React Native hat. Wenn Sie dort Textkomponenten hinzufügen, 46 00:04:16,580 --> 00:04:17,720 wird 47 00:04:17,720 --> 00:04:23,900 der Stil an verschachtelte Textkomponenten weitergegeben. Dies ist eine Ausnahme, 48 00:04:23,900 --> 00:04:29,750 die React Native hat. Text innerhalb von Text erhält den im 49 00:04:29,750 --> 00:04:37,610 äußeren Text definierten Stil, sodass jeder Stil, den Sie hier im Haupttext einrichten, automatisch von den verschachtelten Textkomponenten empfangen wird. 50 00:04:37,680 --> 00:04:43,800 Es gibt ein weiteres wichtiges Verhalten in Bezug auf die Textkomponente in React Native, nämlich, dass 51 00:04:43,800 --> 00:04:47,370 keine Flexbox verwendet wird. Die Ansicht verwendet Flexbox, 52 00:04:47,370 --> 00:04:52,110 die Textkomponente natürlich nicht, und ich habe bereits erwähnt, dass die Ansichtskomponente Flexbox 53 00:04:52,320 --> 00:05:00,180 verwendet, nicht Text oder andere Komponenten, sondern Text ein eigenes Positionierungssystem verwendet, bei dem es sich automatisch in eine neue Zeile einfügt, wenn 54 00:05:00,210 --> 00:05:05,580 dies nicht der Fall ist. Wenn dies nicht in eine Zeile passt und dies demonstriert 55 00:05:05,580 --> 00:05:12,810 werden soll, können wir hier über den Bildschirm zum Spiel gehen und unseren gesamten Text hier unten in eine andere Ansicht 56 00:05:12,810 --> 00:05:21,180 einbinden. Nehmen Sie also diesen Text und fügen Sie ihn hier in diese Ansicht ein und fügen Sie dort einen Stil hinzu Sagen wir, 57 00:05:21,210 --> 00:05:28,080 nennen Sie es Ergebnistext, was auch immer Sie diesen oder Ergebniscontainer benennen möchten, um mehr mit den anderen Stilnamen übereinzustimmen. 58 00:05:28,170 --> 00:05:30,410 Der Ergebniscontainer wird also zur 59 00:05:30,570 --> 00:05:38,300 Ansicht hinzugefügt. Wenn ich diesen hier irgendwo in meinem Stylesheet hinzufüge und ihm eine Breite von beispielsweise 80% gebe, ist dies sinnvoll, 60 00:05:38,550 --> 00:05:42,420 damit der Text etwas mehr Abstand nach links und rechts oder 61 00:05:42,480 --> 00:05:49,980 hat Alternativ füge ich einen horizontalen Rand von beispielsweise 20 hinzu, um einen gewissen Abstand links und rechts um den Container zu 62 00:05:49,980 --> 00:05:55,980 haben. Dann sehen Sie, dass der Text tatsächlich in eine neue Zeile eingeschlossen wird. Dies ist auch 63 00:05:55,980 --> 00:05:58,410 ein Standardverhalten der Textkomponente in React Native. 64 00:05:58,410 --> 00:06:05,700 Es analysiert nicht nur Stile auf verschachtelten Text, sondern verfügt auch über ein eigenes Positionierungssystem oder ein eigenes Layoutsystem, bei 65 00:06:05,700 --> 00:06:10,950 dem sich Text automatisch in eine neue Zeile einfügt, wenn er nicht in dieselbe Zeile 66 00:06:11,040 --> 00:06:16,830 passt, und das macht natürlich viel Sinnvollerweise ist es normalerweise das, was Sie in Ihrem Text 67 00:06:17,070 --> 00:06:24,920 wollen, Sie möchten, dass er in neue Zeilen eingeschlossen wird. Jetzt werde ich diese Einstellung auf den Text zurücksetzen, 68 00:06:24,920 --> 00:06:25,880 ich werde 69 00:06:25,880 --> 00:06:28,190 dort eigentlich nicht open-sans-fett verwenden, 70 00:06:28,310 --> 00:06:34,530 ich verwende nur open sans, aber ich wollte diese Stilvererbungssache zeigen und natürlich auch allgemein 71 00:06:34,580 --> 00:06:38,960 wissen, wie sich Text in Bezug auf das Layout verhält. 72 00:06:38,960 --> 00:06:41,450 Alles, was über den Text gesagt wird, 73 00:06:41,480 --> 00:06:43,730 wir sind jedoch noch nicht fertig. Ich 74 00:06:43,760 --> 00:06:49,860 denke, das sieht nicht so gut aus. Stattdessen sollte dieser hervorgehobene Text auf dem Bildschirm über dem Bildschirm möglicherweise 75 00:06:50,100 --> 00:06:55,400 fett sein, daher verwende ich eine offene Schriftfamilie -sans-fett hier, damit dies wirklich auffällt und leichter 76 00:06:55,670 --> 00:07:02,930 zu sehen ist. Außerdem füge ich hier einen horizontalen Rand von 30 hinzu, um etwas mehr Abstand von links nach rechts um 77 00:07:02,930 --> 00:07:04,640 den Text zu haben. 78 00:07:04,640 --> 00:07:10,490 Außerdem möchte ich jetzt sicherstellen, dass der Text zentriert ist, sodass bei einem Zeilenumbruch alles 79 00:07:10,490 --> 00:07:17,090 in der Mitte zentriert ist und wir nicht wieder am linken Rand beginnen. Dies kann jetzt mit 80 00:07:17,090 --> 00:07:19,010 erreicht werden Eine spezielle 81 00:07:19,010 --> 00:07:21,760 Stileigenschaft, die Sie zu Textkomponenten hinzufügen können. 82 00:07:21,790 --> 00:07:24,770 Dies ist die Eigenschaft zum Ausrichten von Text. 83 00:07:25,070 --> 00:07:29,210 Die Sache ist nur, dass ich dies nicht für den Hervorhebungstext verwenden 84 00:07:29,210 --> 00:07:34,990 möchte, sondern für den gesamten Text und daher müssen wir hier einen Stil hinzufügen. Vielleicht ist der 85 00:07:35,000 --> 00:07:38,460 Ergebnistext hier ein passender Name, da dies unser Name ist 86 00:07:38,660 --> 00:07:40,760 Text insgesamt und dann können wir 87 00:07:44,450 --> 00:07:45,400 hier einfach 88 00:07:45,410 --> 00:07:49,150 Ergebnistext hinzufügen und auf diesem Ergebnistext den Text auf Mitte ausrichten. 89 00:07:49,220 --> 00:07:56,570 Wenn ich dies jedoch speichere, hat dies keine Auswirkung, da unser Textkörper nicht so konfiguriert ist, dass er 90 00:07:56,630 --> 00:08:02,660 den Stil berücksichtigt, den wir möglicherweise hinzufügen. Im Textkörper ist der einzige Stil, der auf den Text 91 00:08:02,660 --> 00:08:04,660 festgelegt ist, der intern definierte Stil. 92 00:08:04,670 --> 00:08:09,080 Jetzt haben wir gelernt, wie man dies ändert. Wir übergeben hier 93 00:08:09,080 --> 00:08:16,170 jedoch einfach ein Objekt an den Stil, übernehmen alle unsere benutzerdefinierten Stileigenschaften aus dieser Datei und verteilen sie 94 00:08:16,170 --> 00:08:20,670 in diesem Objekt. Zusammenführen dieser Objekte mit dem Requisitenstil mithilfe des Spread-Operators 95 00:08:20,670 --> 00:08:22,930 auch hier. Und damit, jetzt, 96 00:08:22,940 --> 00:08:28,370 wenn wir dies speichern, sehen wir, dass dies jetzt schön zentriert ist und dies sicherlich ein bisschen schöner 97 00:08:28,550 --> 00:08:30,490 zu lesen ist, als es vorher war. 98 00:08:30,680 --> 00:08:37,070 Damit sind wir fast fertig mit dem Styling dieses Textes. Das Letzte, was ich hier gut finde, 99 00:08:37,070 --> 00:08:41,490 ist, dass wir im Ergebnistext auch die Schriftgröße ein wenig erhöhen. 100 00:08:41,570 --> 00:08:47,990 Wenn wir hier also die Schriftgröße auf 20 einstellen, also wirklich groß und auf dem 101 00:08:47,990 --> 00:08:55,700 Ergebniscontainer, möchte ich auch einen vertikalen Rand von 15 haben, um oben und unten einen gewissen Abstand um den 102 00:08:55,700 --> 00:08:57,180 Text zu haben. 103 00:08:57,320 --> 00:09:02,240 Und jetzt haben wir ein Spiel über dem Bildschirm, das meiner Meinung nach nicht schlecht aussieht, 104 00:09:02,240 --> 00:09:07,520 und Sie haben viel darüber gelernt, wie Text funktioniert, damit Sie mit der Textkomponente in React Native arbeiten können.