Nachdem das Bild hinzugefügt wurde und wir hier bereits über dem Bildschirm an dem Spiel arbeiten, können wir
diesen Text, den wir hier unten sehen,
fein abstimmen. Machen wir ihn ein bisschen schöner, ein bisschen schöner und zusätzlich
vorher Wenn ich das mache, wechsle ich tatsächlich von der Verwendung des Netzwerk-Images zum lokalen Image, aber
das liegt natürlich ganz bei Ihnen, was Sie dort bevorzugen.
Ich möchte hier also an dem Text arbeiten und anstatt nur diese Art von tabellarischem Text hier zu
haben, der nur einige Informationen auf langweilige Weise ausgibt, warum
präsentieren wir dies nicht in einer schöneren Wartezeit? Im Detail denke ich, es wäre schöner,
wenn wir hier einen von Menschen lesbaren Text hätten, also einen echten Satz, den wir lesen können.
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,
und hier würde die Nummer eingegeben.
Die Nummer ist natürlich die Requisitenbenutzernummer, und Sie können diese Zeile jetzt wieder entfernen,
aber ich möchte nicht nur die Requisitennutzernummer wie diese ausgeben, sondern sie hervorheben, sondern ihr eine
spezielle Farbe geben Das ist anders als die andere Farbe hier und das gleiche hier für die Runden, also wäre
die Anzahl der Requisitenrunden schön, wenn das auch anders gefärbt wäre. Um dies nun anders zu färben, können
wir dies hier tatsächlich in einen anderen Textknoten einbinden. Sie können also Textknoten, Textkomponenten innerhalb von
Text, innerhalb anderer Textkomponenten haben, so dass
dies einfach so möglich ist.
Nun, das ist wirklich wichtig
zu verstehen. Sie können Textkomponenten in andere Textkomponenten verschachteln und bedenken, dass Körpertext am Ende nur eine Textkomponente ist.
Körpertext ist eine Komponente, die einfach die eingebaute Textkomponente zurückgibt, also alles, was wir
tun Die Eingabe zwischen Textkörper ist die gleiche, als ob wir sie zwischen den integrierten Textkomponenten
eingeben würden. Daher können wir dort verschachtelten Text und theoretisch auch verschachtelte Ansichten haben, aber es gibt
einige Einschränkungen, und daher, wenn Sie Sie haben nicht unbedingt einen starken Grund, warum Sie
dort eine Ansicht benötigen würden. Sie sollten Ansichten nicht wirklich in Text verschachteln, und es
gibt selten einen Grund, dies zu tun. Text innerhalb von Text kann jedoch sehr sinnvoll
sein, da Sie damit Teile eines Textes anders als den Rest des Textes gestalten können.
Hier möchte ich zum Beispiel Stil mit Stilen hinzufügen. Hervorheben und das Gleiche hier für den zweiten Text,
um diesen Teil des Textes hervorzuheben. Jetzt können wir natürlich dort unten in unserem Stylesheet im Spiel
über dem Bildschirm Hervorheben hinzufügen, hervorheben und dort beispielsweise eine Farbe geben, in der wir Farben und verwenden Dazu müssen wir
den Import hinzufügen, bei dem wir Farben aus Konstanten / Farben importieren, und dann möglicherweise unsere
Primärfarbe dort verwenden, also Farben. primär. Wenn wir das tun, werden Sie sehen, dass dies jetzt hervorgehoben wird.
Jetzt auch etwas Interessantes, wenn ich vorübergehend zum Textkörper gehe und diesen hier in fett
ohne Fett
ändere, also die fett gedruckte Version verwende, werden Sie feststellen, dass selbst der hervorgehobene Text noch fett ist
und möglicherweise etwas schwer zu erkennen ist Aber das ist eigentlich fett und das ist sehr interessant,
weil ich zu Beginn des Kurses erwähnt habe, dass Ihre Stile nicht erben würden. Wenn Sie beispielsweise im Spiel
über dem Bildschirm eine Schriftfamilie hier auf Ihrem Bildschirmstil festlegen, auf die angewendet wird Die Ansicht, die alles umschließt, diese Schriftfamilie wird nicht
an Komponenten weitergegeben, die in dieser Ansicht verschachtelt sind.
Nur weil Sie hier in dieser Ansicht einen Stil festlegen, bedeutet dies nicht, dass alle anderen Ansichten dort oder alle anderen
Texte dort, was auch immer es ist, dieselben Stile erhalten. Die Stile, die Sie auf eine Komponente anwenden,
werden immer nur auf diese Komponente und nicht auf verschachtelte Komponenten angewendet, und dennoch unterscheidet sie sich für den Text.
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,
und das
ist einfach ein wichtiger Unterschied, den React Native hat. Wenn Sie dort Textkomponenten hinzufügen,
wird
der Stil an verschachtelte Textkomponenten weitergegeben. Dies ist eine Ausnahme,
die React Native hat. Text innerhalb von Text erhält den im
äußeren Text definierten Stil, sodass jeder Stil, den Sie hier im Haupttext einrichten, automatisch von den verschachtelten Textkomponenten empfangen wird.
Es gibt ein weiteres wichtiges Verhalten in Bezug auf die Textkomponente in React Native, nämlich, dass
keine Flexbox verwendet wird. Die Ansicht verwendet Flexbox,
die Textkomponente natürlich nicht, und ich habe bereits erwähnt, dass die Ansichtskomponente Flexbox
verwendet, nicht Text oder andere Komponenten, sondern Text ein eigenes Positionierungssystem verwendet, bei dem es sich automatisch in eine neue Zeile einfügt, wenn
dies nicht der Fall ist. Wenn dies nicht in eine Zeile passt und dies demonstriert
werden soll, können wir hier über den Bildschirm zum Spiel gehen und unseren gesamten Text hier unten in eine andere Ansicht
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,
nennen Sie es Ergebnistext, was auch immer Sie diesen oder Ergebniscontainer benennen möchten, um mehr mit den anderen Stilnamen übereinzustimmen.
Der Ergebniscontainer wird also zur
Ansicht hinzugefügt. Wenn ich diesen hier irgendwo in meinem Stylesheet hinzufüge und ihm eine Breite von beispielsweise 80% gebe, ist dies sinnvoll,
damit der Text etwas mehr Abstand nach links und rechts oder
hat Alternativ füge ich einen horizontalen Rand von beispielsweise 20 hinzu, um einen gewissen Abstand links und rechts um den Container zu
haben. Dann sehen Sie, dass der Text tatsächlich in eine neue Zeile eingeschlossen wird. Dies ist auch
ein Standardverhalten der Textkomponente in React Native.
Es analysiert nicht nur Stile auf verschachtelten Text, sondern verfügt auch über ein eigenes Positionierungssystem oder ein eigenes Layoutsystem, bei
dem sich Text automatisch in eine neue Zeile einfügt, wenn er nicht in dieselbe Zeile
passt, und das macht natürlich viel Sinnvollerweise ist es normalerweise das, was Sie in Ihrem Text
wollen, Sie möchten, dass er in neue Zeilen eingeschlossen wird. Jetzt werde ich diese Einstellung auf den Text zurücksetzen,
ich werde
dort eigentlich nicht open-sans-fett verwenden,
ich verwende nur open sans, aber ich wollte diese Stilvererbungssache zeigen und natürlich auch allgemein
wissen, wie sich Text in Bezug auf das Layout verhält.
Alles, was über den Text gesagt wird,
wir sind jedoch noch nicht fertig. Ich
denke, das sieht nicht so gut aus. Stattdessen sollte dieser hervorgehobene Text auf dem Bildschirm über dem Bildschirm möglicherweise
fett sein, daher verwende ich eine offene Schriftfamilie -sans-fett hier, damit dies wirklich auffällt und leichter
zu sehen ist. Außerdem füge ich hier einen horizontalen Rand von 30 hinzu, um etwas mehr Abstand von links nach rechts um
den Text zu haben.
Außerdem möchte ich jetzt sicherstellen, dass der Text zentriert ist, sodass bei einem Zeilenumbruch alles
in der Mitte zentriert ist und wir nicht wieder am linken Rand beginnen. Dies kann jetzt mit
erreicht werden Eine spezielle
Stileigenschaft, die Sie zu Textkomponenten hinzufügen können.
Dies ist die Eigenschaft zum Ausrichten von Text.
Die Sache ist nur, dass ich dies nicht für den Hervorhebungstext verwenden
möchte, sondern für den gesamten Text und daher müssen wir hier einen Stil hinzufügen. Vielleicht ist der
Ergebnistext hier ein passender Name, da dies unser Name ist
Text insgesamt und dann können wir
hier einfach
Ergebnistext hinzufügen und auf diesem Ergebnistext den Text auf Mitte ausrichten.
Wenn ich dies jedoch speichere, hat dies keine Auswirkung, da unser Textkörper nicht so konfiguriert ist, dass er
den Stil berücksichtigt, den wir möglicherweise hinzufügen. Im Textkörper ist der einzige Stil, der auf den Text
festgelegt ist, der intern definierte Stil.
Jetzt haben wir gelernt, wie man dies ändert. Wir übergeben hier
jedoch einfach ein Objekt an den Stil, übernehmen alle unsere benutzerdefinierten Stileigenschaften aus dieser Datei und verteilen sie
in diesem Objekt. Zusammenführen dieser Objekte mit dem Requisitenstil mithilfe des Spread-Operators
auch hier. Und damit, jetzt,
wenn wir dies speichern, sehen wir, dass dies jetzt schön zentriert ist und dies sicherlich ein bisschen schöner
zu lesen ist, als es vorher war.
Damit sind wir fast fertig mit dem Styling dieses Textes. Das Letzte, was ich hier gut finde,
ist, dass wir im Ergebnistext auch die Schriftgröße ein wenig erhöhen.
Wenn wir hier also die Schriftgröße auf 20 einstellen, also wirklich groß und auf dem
Ergebniscontainer, möchte ich auch einen vertikalen Rand von 15 haben, um oben und unten einen gewissen Abstand um den
Text zu haben.
Und jetzt haben wir ein Spiel über dem Bildschirm, das meiner Meinung nach nicht schlecht aussieht,
und Sie haben viel darüber gelernt, wie Text funktioniert, damit Sie mit der Textkomponente in React Native arbeiten können.