Jetzt haben wir in diesem Kurs bereits mehrmals Schriftarten hinzugefügt, sodass es nicht
allzu neu ist, wie dies funktioniert. Im Assets-Ordner füge ich einen Fonts-Ordner hinzu, aber Sie können sie wieder speichern, wo immer Sie möchten. Im Anhang finden Sie die beiden Schriftarten, die wir
während des gesamten Kurses verwendet haben. Sie sind ohne Fettdruck und
regelmäßig geöffnet. Jetzt müssen wir sie laden, wenn die
App in der App gestartet wird. js Datei. Dort können Sie
jetzt etwas aus der Expo importieren und dass etwas die App-Ladekomponente ist. Außerdem müssen Sie star als Schriftart aus der Expo-Schriftart importieren. Um
sicherzustellen, dass diese verfügbar ist, führen Sie npm install --save expo-font aus, um sie zu
installieren Dies in Ihr Projekt und stellen Sie sicher, dass Sie es verwenden können.
Dies sind die beiden Dinge, die Sie dort installieren müssen. Wenn diese
installiert sind, können wir hier eine neue Funktion hinzufügen, die möglicherweise als Abruf von Schriftarten bezeichnet wird.
Dies ist eine Funktion, die am Ende keine Argumente akzeptiert, aber dort kann ich jetzt das Laden von Schriftarten als
asynchron bezeichnen und das zurückgeben, da dies ein Versprechen zurückgibt
und das Abrufen von Schriftarten ein Versprechen zurückgeben sollte und dort ein
Javascript-Objekt übergeben wird, in dem wir die Schriftarten zuordnen, die wir zuordnen Ich möchte laden
und dann habe ich Open-Sans, die ich meinem erforderlichen Import hier zuordne, wo ich auf den Assets-Ordner, den Fonts-Ordner und den Open-Sans-Regular zeige und hier Open-Sans-Bold als Schlüssel
und Map hinzufüge Das erfordert / Assets / Fonts / Open-Sans-Bold, damit beide Fonts hier importiert werden.
Jetzt muss natürlich Fetch Fonts aufgerufen werden und das sollte von unserer App-Ladekomponente aufgerufen werden,
daher müssen wir auch den Nutzungsstatus aus React importieren, damit wir steuern können, ob
die Daten
noch geladen wurden oder nicht, so dass in der Funktionskomponente hier können wir unseren Schriftart-Ladezustand haben und die Schriftart laden und anfänglich
mit dem Verwendungsstatus setzen, das ist falsch.
Wenn das wahr sein sollte, möchte ich diese Ausgabe rendern. Solange
sie falsch ist, daher das Ausrufezeichen hier, möchte ich stattdessen die App-Ladekomponente zurückgeben, die unser Laden verlängert,
unseren Startbildschirm und dort müssen wir Stellen Sie diese asynchrone Start-Requisite bereit, die auf die Funktion zum Abrufen von
Schriftarten verweist. Dies ist die Funktion, die ausgeführt wird, wenn diese Komponente zum ersten
Mal gerendert wird, und am Ende eine Funktion, die ausgeführt wird, sobald dieses Laden abgeschlossen ist und in dieser Funktion,
die ausgeführt werden soll,
I ' Ich setze meine geladene Schriftart auf true, damit wir das Laden der App nicht mehr rendern, sondern diesen Inhalt rendern.
Jetzt werden unsere Schriftarten geladen und jetzt können wir sie verwenden und ich möchte sie an zwei Stellen verwenden - meinem
Produktartikel, der die Komponente ist, die wir in der Produktübersicht rendern. Dort haben wir natürlich Text,
wir haben unseren Titel und wir haben unseren Preis hier und dort, wo auf
dem Titel, ich möchte auch eine Schriftfamilie von Open-Sans-Bold und
auf den Preis, den ich auch festlegen möchte Eine Schriftfamilie von Open-Sans
und auf dem Produktdetailbildschirm ist es dasselbe. Der Preis sollte vielleicht eine Schriftfamilie von Open-Sans-Bold erhalten, um diesen fetten
Stil zu erhalten, und die Beschreibung wird nur die Open-Sans-Schriftart erhalten.
Nun, das ist noch nicht alles. Im Shop-Navigator in meinem Hauptnavigator hier und in den Standardnavigationsoptionen
möchte
ich diese Schriftart auch in der Kopfzeile verwenden. Daher sollte der Titelstil der Kopfzeile hier eigentlich ein Objekt sein, in dem
ich die Schriftfamilie festgelegt habe zu open-sans-fett, um dort die fettgedruckte Schriftart open sans zu verwenden, und der Titelstil der Kopfzeile zurück
definiert, wie der hintere Text, den wir unter iOS sehen, so gestaltet ist, und das sollte auch eine
Schriftfamilie von open-sans verwenden, nicht die fettgedruckte Ausführung. Wenn wir dies und dieses Nachladen jetzt speichern, können wir sehen,
dass unsere eigene Schriftart verwendet wird. Jetzt sehen wir auch, dass hier unter iOS unser Titel abgeschnitten ist.
Das müssen wir korrigieren, aber im Allgemeinen sieht das jetzt so aus, wie es aussehen sollte. Stellen wir nun sicher, dass der abgeschnittene
Titel festgelegt ist, und dafür sollte in dem Produktartikel hier, in dem wir diesen Titel haben, dieser Titel
möglicherweise einen reduzierten Rand vertikal von nur 2 haben, da mir dieser Abstand immer noch gefällt und jetzt der 15% der Höhe, die wir
dem Titel geben, und der Preis reichen aus, um dies zu teilen, und daher sieht
dies jetzt so aus, wie es aussehen sollte.
Jetzt verwenden wir die benutzerdefinierte Schriftart. Wir können zur Detailseite gehen. Ich würde sagen, es
ist jetzt wirklich an der Zeit, sicherzustellen, dass wir Artikel in den Warenkorb legen können, und wir sorgen daher dafür, dass
diese Schaltfläche in den Warenkorb funktioniert.