Nachdem die allgemeine Spielelogik funktioniert, konzentrieren wir uns nun mehr darauf, das Styling fertigzustellen und unsere eigenen benutzerdefinierten
Schriftarten und ein schönes kleines Bild auf dem Spielbildschirm über dem Bildschirm hinzuzufügen, da die
Arbeit mit Bildern und die Arbeit mit benutzerdefinierten Schriftarten in der heutigen Zeit typisch ist Bei der App-Entwicklung
möchten Sie sich natürlich selten an die Standard-Systemschriftarten halten, und selten haben Sie eine App ohne Bilder.
Beginnen wir also mit benutzerdefinierten Schriftarten. In einer React Native-Ausstellung ist das Hinzufügen von Schriftarten sehr trivial.
Erstellen Sie in Ihrem
Projektordner im Assets-Ordner einen Schriftartenordner. Sie können das zwar überall speichern, aber
ich möchte es im Assets-Ordner behalten, damit meine Assets wie Schriftarten und Bilder organisiert bleiben.
Hier im Ordner "Schriftarten" möchte ich meine Schriftarten überraschenderweise verwalten. Im Anhang finden Sie
eine Zip-Datei mit zwei Schriftarten, die Sie einfach extrahieren und dann per Drag
& Drop hierher ziehen können. Das ist OpenSans-Bold
und OpenSans-Regular Diese beiden Schriftarten werden in einer Zip-Datei an dieses Video angehängt, extrahiert und in
den Schriftartenordner gezogen.
Damit sind diese Schriftarten allgemein verfügbar, aber um sie zu verwenden, müssen Sie noch weitere konfigurieren.
Sie müssen zu Ihrer App gehen. js-Datei und weisen Sie React Native und expo an, diese Schriftarten
zu laden, um sie zu verwenden. Dafür in der App. js Datei und ich benutze die App. js-Datei, da dies die
erste Datei ist, die geladen oder ausgeführt wird, sozusagen beim Start der App, und
Sie Ihre Schriftarten beim Start der App laden möchten. Dort müssen Sie einen Import hinzufügen, und beim Import wird
alles importiert Als Schriftart, obwohl dieser Name hier bei Ihnen liegt, verwenden Sie hier normalerweise die Schriftart von expo-font.
Expo-font ist also ein Paket, das Ihnen Schriftarten-Dienstprogramme bietet, also Dienstprogramme, mit denen Sie Schriftarten laden und alles aus
diesem Paket importieren und in diesem Schriftartenobjekt bündeln können. Genau das tun
wir hier. Um nun
Schriftarten zu laden, füge ich eine neue Funktion außerhalb der Funktionskomponente hinzu, da
diese Funktion nicht für jeden Komponenten-Rendering-Zyklus neu erstellt werden muss.
Jetzt werde ich es
Fetch Fonts nennen,
der Name liegt bei Ihnen und
in dieser Funktion hier werde ich Font aufrufen. loadAsync.
Dies ist eine Funktion oder eine Methode für das Schriftpaket, die wir hier importieren, mit
der Sie Schriftarten laden können. Was Sie zum Laden von Async übergeben, ist ein Objekt, bei dem Sie Expo und damit React Native
über alle gewünschten Schriftarten informieren Belastung. Sie tun dies, indem Sie einen Schlüssel verwenden,
mit dem Sie einen beliebigen Namen Ihrer Wahl auswählen, z. B. open-sans. Später können Sie diese Schriftarten mit diesen
Namen verwenden. Öffnen Sie hier also sans, da meine Schriftart open sans heißt.
Hier ist es also ohne Sans geöffnet, und dann fügen Sie erforderlich
hinzu. Dies ist eine Sprachfunktion, die Javascript bietet, wenn Sie auf den Pfad zeigen, in dem diese Schriftart gespeichert ist.
Das ist ein
relativer Pfad, also zeige ich hier auf
den Assets-Ordner, den Fonts-Ordner und dann auf OpenSans-Bold, nicht fett, aber normal. ttf-Datei und jetzt füge ich hier ein zweites Element
zu diesem Objekt hinzu, das ich zum Laden von Async übergebe, und das könnte offen ohne Fettdruck sein.
Jetzt liegen diese Namen ganz bei Ihnen und dort möchte ich die fette Version laden.
Damit teilen wir React Native am Ende mit, wo unsere Schriftarten leben, wo diese Schriftdateien leben und welchen Namen wir sie zuordnen möchten,
und wir können diese Namen später verwenden, um diese Schriftarten dem Text zuzuweisen. Jetzt gibt das Laden von Async tatsächlich ein Versprechen zurück, was
bedeutet, dass dies etwas länger dauert, nicht sehr lange, aber es wird nicht sofort geladen, und ich werde dieses
Versprechen hier innerhalb von Abrufschriftarten zurückgeben, damit wir warten können, wann immer wir Abrufschriftarten aufrufen
für dieses Versprechen zu lösen, bevor wir fortfahren. Wo wollen wir
nun unsere Schriften abrufen?
Nun, wir könnten unsere Schriftarten hier manuell laden, wir könnten zum Beispiel Abrufschriften wie diese aufrufen und es würde weitergehen und unsere Schriftarten
abrufen, aber das Problem
ist, wir würden weiter rendern und wir würden schließlich unseren Inhalt rendern und wenn irgendwo im Inhalt, Wir verwenden
Text, der versucht, eine solche Schriftart zu verwenden. Wenn die Schriftart noch nicht
geladen wurde und wie gesagt, dauert es nur ein paar Millisekunden, aber für den ersten Renderzyklus wurde
die Schriftart möglicherweise nicht geladen Wir würden einen Fehler bekommen. Das Laden unserer Schriftarten wie diese
wird daher nicht empfohlen, es wird sehr wahrscheinlich nicht funktionieren.
Stattdessen gibt es eine spezielle Komponente, die Sie zum Laden Ihrer Schriftarten verwenden können. Sie importieren diese Komponente
von expo und der Name dieser Komponente lautet AppLoading.
Dies ist eine Komponente, die den Standard-Ladebildschirm im Grunde verlängert. Die Benutzer des Begrüßungsbildschirms sehen sowieso, wenn
die App gestartet wird. Sie verlängert diesen Bildschirm, um aktiv zu bleiben, bis eine bestimmte Aufgabe Ihrer
Wahl erledigt
ist, beispielsweise bis zum Abrufen von Schriftarten erledigt.
Beim AppLoading müssen wir in der App-Komponente nur noch sicherstellen, dass
wir diese Komponente anstelle unseres eigentlichen Inhalts rendern, solange wir unsere Schriftarten noch nicht
geladen haben oder solange
wir noch nicht mit dem Laden fertig sind wir wollten laden.
Das Coole ist, wir können den Status dafür verwenden und mit dem Anfangswert false beginnen,
da der Status, den ich hier verwalten möchte, Daten sind oder wie auch immer Sie ihn aufrufen und die geladenen Daten festlegen möchten.
Hier möchte ich überprüfen, ob die geladenen Daten nicht wahr sind, daher das Ausrufezeichen. Dann weiß ich, dass die Daten noch nicht
geladen wurden, und das ist anfangs der Fall. In diesem Fall werde ich nicht
einmal
mit meiner anderen Logik fortfahren Stattdessen gebe ich für diese Funktionskomponente die AppLoading-Komponente sofort als Inhalt der App zurück, da ich keinen
anderen Inhalt rendern möchte, wenn wir unsere Daten noch laden.
Jetzt ist AppLoading eine Komponente von Expo, die eine asynchrone Start-Requisite verwendet, bei der wir auf die Operation zeigen, die wir beim
ersten Rendern starten möchten, und das ist natürlich unsere Funktion zum Abrufen von Schriftarten.
Hier zeige ich also auf Abrufschriften, auf diese Funktion.
Nun wichtig, a) dies muss
eine Funktion sein, die Sie hier übergeben, und b) es muss eine Funktion sein, die ein
Versprechen zurückgibt, da die Expo dieses Versprechen automatisch für Sie hört und
wenn das Versprechen aufgelöst wird, weiß sie, dass das Laden erfolgt Wenn dies erledigt ist, wird alles, was Sie hier übergeben,
an onFinish aufgerufen.
Hier müssen Sie also eine Funktion übergeben, die dann die geladenen Daten auf true setzt.
Diese Funktion hier wird also für Sie ausgeführt, wenn dieser Vorgang abgeschlossen ist, und damit die
Messe herausfindet,
wann dies ausgeführt wird, sollte dies ein Versprechen zurückgeben.
Jetzt arbeiten diese beiden Requisiten zusammen und wir aktualisieren die geladenen Daten. Dieser Status ist wahr und daher wird dieser Inhalt
nicht gerendert, sondern mit der Ausführung dieses Codes und schließlich mit dem Rendern des Inhalts dort unten, wenn
das Abrufen unserer
Schriftarten abgeschlossen ist, und Sie Sie können hier jede asynchrone Operation ausführen, aber normalerweise verwenden Sie AppLoading, um einige Assets wie Schriftarten
oder ähnliches zu laden. Daher sollten Assets vorhanden sein,
die beim Start der App vorhanden sein sollten und die Sie sofort benötigen. In der Regel
handelt es sich dabei um Schriftarten.
Jetzt können Sie hier übrigens auch einen onError-Handler hinzufügen, und hier protokolliere ich nur das Fehlerobjekt,
das wir
auch hier erhalten, wenn das Laden fehlschlägt. Natürlich möchten Sie dies möglicherweise nicht nur protokollieren, sondern stattdessen etwas
anderes tun, alternative Inhalte in Ihrer
App anzeigen, so etwas. Hier werde ich es nur protokollieren,
da dies nicht fehlschlagen sollte. Die Schriftarten sind hier lokal verfügbar, sodass sie ohne Probleme geladen werden können.
Wenn wir das speichern, startet unsere App natürlich neu und wir sehen hier keinen Unterschied. Unser Ladebildschirm
dauert auch nicht mehr so lange wie zuvor, da das Laden superschnell ist. Es geschieht
einfach nicht sofort,
deshalb brauchten wir es dieser Ansatz.
Aber jetzt haben wir die
Schriftarten geladen. Wie können wir sie jetzt verwenden?
Nehmen wir an, wir möchten unseren Start hier um einen neuen Spieletitel ändern, um unsere Schriftart zu verwenden. Dazu müssen wir jetzt zum Startspielbildschirm
gehen, auf dem dieser Titel am Ende lebt. Hier starten Sie ein neues Spiel, es hat den Titelstil und
daher können wir es jetzt im Stylesheet hier auf Titel einstellen Schriftfamilie, um die
Schriftfamilie zu ändern und diese beispielsweise auf open-sans-fett zu setzen,
und natürlich
muss der hier verwendete Bezeichner ein Bezeichner sein, den Sie hier geladen haben.
Hier habe ich also Open-Sans-Bold und Open Sans.
Ich kann diese beiden Bezeichner in meinem Code überall in der App verwenden, wenn ich eine benutzerdefinierte Schriftart zuweisen möchte, und
genau das mache ich hier.
Nun sehen Sie, dass es eine andere Schriftart gibt, die fett gedruckt ist. Wenn Sie benutzerdefinierte Schriftarten verwenden
und eine fett gedruckte Schriftart möchten, müssen Sie diese mit
der Schriftfamilie laden. Sie können die Schriftstärke nicht festlegen. React Native unterstützt dies, aber für benutzerdefinierte Schriftarten unterstützt expo
dies derzeit
nicht. Stattdessen müssen Sie einfach eine separate Schriftfamilie verwenden, was, wie Sie sehen, kein wirkliches Problem darstellt.