Jetzt, da unsere benutzerdefinierten Schriftarten hinzugefügt wurden, können wir sie jetzt in unserer Anwendung
verwenden, und ich möchte sie an allen Stellen verwenden, an denen wir einige Texte anzeigen, wie
hier bei Ihnen, hier bei den Gegnern und dann auch auf der
Übersichtsseite. Das wird auch hier in dieser Anwendung ein Ziel sein und außerdem möchte ich, wenn ein Spiel vorbei
ist, nicht nur unsere benutzerdefinierte Schriftart hier auf dieser Spiel-Over-Seite verwenden, sondern auch ein Bild zeigen, ein Spiel vorbei
Bild hier, das ist
das nächste, woran ich arbeiten möchte.
Der erste Schritt besteht darin, diesen Text hier durch den Text zu ersetzen, um die Schriftart zu verwenden. Daher importiere ich Text
aus dem Komponentenordner und dort aus dem Text und ersetze dann alle diese Textkomponenten hier durch Text, einfach so, wenn
ein Spiel stattfindet ist vorbei, wir verwenden unsere benutzerdefinierte Schriftart, das ist
das Ziel hier.
Aber so wie ich gerade
gesagt habe, sollte hier vor allem passieren, dass wir hier auch ein Bild haben.
Nehmen wir also an, wir haben das Spiel tatsächlich über dem Titel, also verwenden wir den Titeltext hier, vielleicht jetzt,
wo ich
darüber nachdenke, Titeltext anstelle von Textkörper, aber unter diesem Titel,
also unter dem Spiel, zeigen wir einen Bild.
Hier möchte ich eine Komponente verwenden, mit der wir tatsächlich ein Bild anzeigen können, und React
Native verfügt über eine solche Komponente, eine Bildkomponente. Wir können das Bild hier einfach so als normale Komponente in
unserem jsx-Code verwenden, es ist eine selbstschließende Komponente, ein Bild hat eine wichtige Requisite und das ist die Quell-Requisite
und die Quell-Requisite, wie der Name schon sagt, muss so eingestellt sein, dass sie darauf zeigt ein Bild und jetzt gibt es
zwei Arten von Bildern, die Sie verwenden können - lokale Bilder, die Sie als Teil Ihrer App versenden, die Sie
also in Ihren Quellcode aufnehmen, in Ihr App-Bundle am Ende oder Netzwerkbilder, und wir haben eine schau dir beide an.
Beginnen wir nun mit einem lokalen Bild und im Anhang finden Sie diesen Erfolg. PNG-Datei, die Sie in Ihren Assets-Ordner ziehen können, also nicht
im dortigen Fonts-Ordner, sondern nur in Assets,
oder Sie erstellen einen Unterordner für Bilder, wenn Sie möchten, spielt keine Rolle, ich
habe
sie nur
hier in Assets Es ist dieser Erfolg. PNG-Datei und dies ist die Datei, die ich
hier verwenden möchte, also das Bild, das ich hier rendern möchte. Um dieses Bild hier zu rendern, verwenden wir eine spezielle
Syntax, die beim ersten Mal seltsam aussehen kann. Sie haben diese Anforderungsfunktion verwendet, die in Javascript integriert
ist oder von React Native in Javascript unterstützt wird. Nehmen wir an, Sie übergeben eine Zeichenfolge als Argument, und dies
ist die Zeichenfolge, die auf das Bild zeigt, und dies sollte ein relativer Pfad sein
Wir befinden uns
im Bildschirmordner, müssen eine Ebene nach oben gehen, dann in den Ordner "Assets" und dann können
wir hier auf Erfolg hinweisen. png,
einfach so.
Dies sagt React Native nun, dass wir dieses Bild hier und hinter den Kulissen verwenden
möchten. Es ermöglicht React Native, dies effektiv zu laden und auch das Bild zu betrachten und
beispielsweise seine
Breite und Höhe zu bestimmen. Deshalb verwenden wir dieses seltsame Bild erfordern Syntax und wir müssen lokale Bilder wie diese laden.
Um das Ergebnis
zu sehen, werde ich die App optimieren. js-Datei vorübergehend, um sicherzustellen, dass das Spiel dort immer über dem
Bildschirm angezeigt wird, damit ich nicht immer den gesamten Bildschirm durchgehen muss, um zu überprüfen, ob es aktualisiert und geändert wurde.
Das Spiel über dem Bildschirm ist das, was ich hier von Anfang an vorübergehend als Hauptinhalt verwenden werde, und ich werde einfach einige Dummy-Nummern
für Rundennummer und Benutzernummer übergeben. Wiederum mache ich dies nur, damit wir beginnen das Spiel
über dem Bildschirm hier und sehen, was dies uns gibt. Und wir können sehen, was uns
das gibt, es gibt uns am Ende ein Vollbild, ein wirklich großes Bild.
Der Grund dafür ist, dass das Bild, das ich Ihnen gegeben habe,
ziemlich groß ist, dieser Erfolg. Die PNG-Datei ist keine kleine
Datei, sondern ein ziemlich großes Bild in Bezug auf die Pixel, ihre Breite und Höhe.
Und wie gesagt, wenn Sie Requirement wie dieses verwenden, ist das Gute, dass React Native sich die Bilddatei ansieht, ihre Breite und
Höhe bestimmt und hier dieselbe Breite und Höhe verwendet, was bedeutet, dass wir dieses
riesige Bild hier in der Anwendung rendern und der Nachteil ist einfach, dass dies jetzt nicht mehr auf den Bildschirm passt
oder den gesamten Bildschirm einnimmt, weil es eine zu große Datei ist.
Wenn wir ein kleineres Bild hätten, wäre dies kein Problem, dann würde es nur einen Teil des Bildschirms einnehmen,
aber da es ein großes Bild ist, nimmt es den gesamten Bildschirm ein.