1 00:00:02,190 --> 00:00:06,450 Jetzt haben wir in diesem Kurs bereits mehrmals Schriftarten hinzugefügt, sodass es nicht 2 00:00:06,450 --> 00:00:12,780 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 3 00:00:12,780 --> 00:00:15,470 während des gesamten Kurses verwendet haben. Sie sind ohne Fettdruck und 4 00:00:15,480 --> 00:00:17,550 regelmäßig geöffnet. Jetzt müssen wir sie laden, wenn die 5 00:00:17,550 --> 00:00:22,690 App in der App gestartet wird. js Datei. Dort können Sie 6 00:00:23,100 --> 00:00:34,690 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 7 00:00:34,690 --> 00:00:42,310 sicherzustellen, dass diese verfügbar ist, führen Sie npm install --save expo-font aus, um sie zu 8 00:00:42,340 --> 00:00:49,870 installieren Dies in Ihr Projekt und stellen Sie sicher, dass Sie es verwenden können. 9 00:00:49,890 --> 00:00:53,760 Dies sind die beiden Dinge, die Sie dort installieren müssen. Wenn diese 10 00:00:53,770 --> 00:00:58,620 installiert sind, können wir hier eine neue Funktion hinzufügen, die möglicherweise als Abruf von Schriftarten bezeichnet wird. 11 00:00:58,640 --> 00:01:07,690 Dies ist eine Funktion, die am Ende keine Argumente akzeptiert, aber dort kann ich jetzt das Laden von Schriftarten als 12 00:01:08,200 --> 00:01:13,510 asynchron bezeichnen und das zurückgeben, da dies ein Versprechen zurückgibt 13 00:01:13,510 --> 00:01:18,910 und das Abrufen von Schriftarten ein Versprechen zurückgeben sollte und dort ein 14 00:01:18,940 --> 00:01:25,560 Javascript-Objekt übergeben wird, in dem wir die Schriftarten zuordnen, die wir zuordnen Ich möchte laden 15 00:01:25,560 --> 00:01:38,020 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 16 00:01:38,080 --> 00:01:45,560 und Map hinzufüge Das erfordert / Assets / Fonts / Open-Sans-Bold, damit beide Fonts hier importiert werden. 17 00:01:45,580 --> 00:01:51,230 Jetzt muss natürlich Fetch Fonts aufgerufen werden und das sollte von unserer App-Ladekomponente aufgerufen werden, 18 00:01:51,370 --> 00:01:56,800 daher müssen wir auch den Nutzungsstatus aus React importieren, damit wir steuern können, ob 19 00:01:56,800 --> 00:01:57,990 die Daten 20 00:01:58,240 --> 00:02:06,430 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 21 00:02:06,430 --> 00:02:09,080 mit dem Verwendungsstatus setzen, das ist falsch. 22 00:02:09,250 --> 00:02:13,190 Wenn das wahr sein sollte, möchte ich diese Ausgabe rendern. Solange 23 00:02:13,270 --> 00:02:18,970 sie falsch ist, daher das Ausrufezeichen hier, möchte ich stattdessen die App-Ladekomponente zurückgeben, die unser Laden verlängert, 24 00:02:18,970 --> 00:02:25,210 unseren Startbildschirm und dort müssen wir Stellen Sie diese asynchrone Start-Requisite bereit, die auf die Funktion zum Abrufen von 25 00:02:25,930 --> 00:02:30,850 Schriftarten verweist. Dies ist die Funktion, die ausgeführt wird, wenn diese Komponente zum ersten 26 00:02:30,850 --> 00:02:37,350 Mal gerendert wird, und am Ende eine Funktion, die ausgeführt wird, sobald dieses Laden abgeschlossen ist und in dieser Funktion, 27 00:02:37,350 --> 00:02:38,830 die ausgeführt werden soll, 28 00:02:38,830 --> 00:02:45,890 I ' Ich setze meine geladene Schriftart auf true, damit wir das Laden der App nicht mehr rendern, sondern diesen Inhalt rendern. 29 00:02:46,000 --> 00:02:51,490 Jetzt werden unsere Schriftarten geladen und jetzt können wir sie verwenden und ich möchte sie an zwei Stellen verwenden - meinem 30 00:02:51,520 --> 00:02:58,030 Produktartikel, der die Komponente ist, die wir in der Produktübersicht rendern. Dort haben wir natürlich Text, 31 00:02:58,030 --> 00:03:06,340 wir haben unseren Titel und wir haben unseren Preis hier und dort, wo auf 32 00:03:06,340 --> 00:03:12,760 dem Titel, ich möchte auch eine Schriftfamilie von Open-Sans-Bold und 33 00:03:12,760 --> 00:03:20,020 auf den Preis, den ich auch festlegen möchte Eine Schriftfamilie von Open-Sans 34 00:03:20,020 --> 00:03:29,080 und auf dem Produktdetailbildschirm ist es dasselbe. Der Preis sollte vielleicht eine Schriftfamilie von Open-Sans-Bold erhalten, um diesen fetten 35 00:03:29,080 --> 00:03:33,310 Stil zu erhalten, und die Beschreibung wird nur die Open-Sans-Schriftart erhalten. 36 00:03:33,490 --> 00:03:40,880 Nun, das ist noch nicht alles. Im Shop-Navigator in meinem Hauptnavigator hier und in den Standardnavigationsoptionen 37 00:03:40,880 --> 00:03:41,880 möchte 38 00:03:41,900 --> 00:03:51,520 ich diese Schriftart auch in der Kopfzeile verwenden. Daher sollte der Titelstil der Kopfzeile hier eigentlich ein Objekt sein, in dem 39 00:03:51,520 --> 00:04:01,360 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 40 00:04:01,510 --> 00:04:09,600 definiert, wie der hintere Text, den wir unter iOS sehen, so gestaltet ist, und das sollte auch eine 41 00:04:09,600 --> 00:04:17,120 Schriftfamilie von open-sans verwenden, nicht die fettgedruckte Ausführung. Wenn wir dies und dieses Nachladen jetzt speichern, können wir sehen, 42 00:04:17,860 --> 00:04:23,060 dass unsere eigene Schriftart verwendet wird. Jetzt sehen wir auch, dass hier unter iOS unser Titel abgeschnitten ist. 43 00:04:23,110 --> 00:04:29,330 Das müssen wir korrigieren, aber im Allgemeinen sieht das jetzt so aus, wie es aussehen sollte. Stellen wir nun sicher, dass der abgeschnittene 44 00:04:29,350 --> 00:04:37,010 Titel festgelegt ist, und dafür sollte in dem Produktartikel hier, in dem wir diesen Titel haben, dieser Titel 45 00:04:37,010 --> 00:04:47,340 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 46 00:04:47,340 --> 00:04:53,800 dem Titel geben, und der Preis reichen aus, um dies zu teilen, und daher sieht 47 00:04:53,880 --> 00:04:57,390 dies jetzt so aus, wie es aussehen sollte. 48 00:04:57,660 --> 00:05:01,540 Jetzt verwenden wir die benutzerdefinierte Schriftart. Wir können zur Detailseite gehen. Ich würde sagen, es 49 00:05:01,710 --> 00:05:06,750 ist jetzt wirklich an der Zeit, sicherzustellen, dass wir Artikel in den Warenkorb legen können, und wir sorgen daher dafür, dass 50 00:05:06,750 --> 00:05:08,340 diese Schaltfläche in den Warenkorb funktioniert.