Nachdem Sie gelernt haben, wie Sie einer Anwendung Schriftarten hinzufügen und anhängen können, finden Sie eine Zip-Datei mit den Schriftarten,
die ich hinzufügen möchte. Dafür füge ich im
Assets-Ordner einen neuen Fonts-Ordner hinzu und dann ist es OpenSans-Bold und Regular. ttf-Datei, die sich in der Zip-Datei befindet, die Sie im
Anhang finden und die ich hier hinzufügen möchte.
Jetzt reicht das Hinzufügen der Dateien allein nicht viel aus, wie Sie natürlich wissen. Stattdessen müssen
wir diese Schriftarten laden und das tun wir in der App. js-Datei, die unsere Startdatei ist, die
die gesamte App startet. Dort müssen wir
alles als Schriftart aus expo-font importieren. Dies ist möglicherweise noch nicht
in Ihrem Projekt verfügbar. Daher möchten Sie möglicherweise npm install ausführen - speichern Sie
expo-font, um sicherzustellen,
dass es verfügbar ist, um dies zu installieren Paket und wenn das installiert ist, können Sie
von dort aus Schriftarten
importieren, und ich möchte auch die App-Ladekomponente von expo importieren. Diese Komponente verlängert den Begrüßungsbildschirm, wenn die
App gestartet wird, bis unsere Schriftarten geladen sind, so dass nur wir Sehen
Sie etwas auf dem Bildschirm, wenn alle unsere Assets, und in diesem
Fall die Schriftarten, wirklich verfügbar und wirklich vorhanden sind. Nachdem diese Importe hinzugefügt wurden, können wir hier außerhalb unserer
Komponentenfunktion eine Funktion
hinzufügen, die ich als Fetch-Schriftarten bezeichne. Diese Funktion verwendet am Ende
die Schriftart. Was ich hier importiere, wird asynchron geladen und dann wir Übergeben Sie ein Objekt, in dem wir die
Daten beschreiben, die wir laden möchten, und das ist die Open-Sans-Schriftart, die ich unter Open Sans registrieren werde. Wir
fügen dies hinzu, indem wir dies von verlangen. / Assets / Fonts / OpenSans, nicht fett, aber normal. ttf und dann haben wir zusätzlich open-sans-fett, das
ist die andere Schriftart, die ich registrieren möchte, indem ich sie von Assets / Fonts /
OpenSans-Bold benötige. ttf, so.
Jetzt müssen wir dies zurückgeben, da das Laden von Async ein Versprechen zurückgibt und ich dies in meiner Funktion
zum Abrufen von Schriftarten zurückgeben möchte, da wir es damit zusammen mit der App-Ladekomponente verwenden können. Dies ist ein Muster, das
Sie zuvor im Kurs kennengelernt haben.
Falls dies für
Sie brandneu ist, lesen Sie zuerst die anderen Abschnitte dieses Kurses.
Jetzt können wir Fetch-Schriftarten mit App-Laden verwenden und dies innerhalb unserer App-Komponente tun. Dort werde ich
einen bestimmten Status verwalten und dies mithilfe des useState-Hooks, den wir aus React importieren, und ich werde
dies benennen Geben Sie die geladene Schriftart ein und setzen Sie die geladene Schriftart und rufen Sie useState auf. Zunächst ist dies falsch,
da die Schriftart anfangs nicht
geladen wurde. Hier können wir überprüfen, ob die Schriftart nicht geladen wurde, was anfangs
der Fall ist. Dann möchte ich zurückkehren Die App-Ladekomponente anstelle meines normalen App-Inhalts, da wir in der App-Ladekomponente
die asynchrone Start-Eigenschaft hinzufügen und auf Abruf-Schriftarten zeigen können, wodurch diese Funktion zum Abrufen von Schriftarten gestartet
wird. Sobald dies erledigt ist, wird die Funktion an onFinish übergeben aufgerufen und in dieser Funktion
setze ich einfach die geladene Schriftart auf true, so. Dies stellt also sicher, dass wir den Begrüßungsbildschirm einfach geöffnet
lassen, bis unsere Schriftarten geladen sind. Dieser wird gerendert, bis wir unsere Schriftarten neu geladen
haben. Danach laden wir stattdessen diesen Inhalt. Jetzt stellen wir sicher, dass wir unsere Schriftarten importieren und
sie verwenden können und sie in diesem Modul benötigen.
Damit ist es jetzt an der Zeit, tatsächlich das hinzuzufügen, wofür wir alle gekommen sind, die Navigation.