1 00:00:02,190 --> 00:00:07,460 Nachdem Sie gelernt haben, wie Sie einer Anwendung Schriftarten hinzufügen und anhängen können, finden Sie eine Zip-Datei mit den Schriftarten, 2 00:00:07,470 --> 00:00:10,000 die ich hinzufügen möchte. Dafür füge ich im 3 00:00:10,020 --> 00:00:16,290 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 4 00:00:16,290 --> 00:00:19,350 Anhang finden und die ich hier hinzufügen möchte. 5 00:00:19,470 --> 00:00:22,670 Jetzt reicht das Hinzufügen der Dateien allein nicht viel aus, wie Sie natürlich wissen. Stattdessen müssen 6 00:00:22,710 --> 00:00:27,690 wir diese Schriftarten laden und das tun wir in der App. js-Datei, die unsere Startdatei ist, die 7 00:00:27,690 --> 00:00:31,070 die gesamte App startet. Dort müssen wir 8 00:00:31,170 --> 00:00:36,660 alles als Schriftart aus expo-font importieren. Dies ist möglicherweise noch nicht 9 00:00:36,660 --> 00:00:43,320 in Ihrem Projekt verfügbar. Daher möchten Sie möglicherweise npm install ausführen - speichern Sie 10 00:00:43,320 --> 00:00:45,010 expo-font, um sicherzustellen, 11 00:00:45,030 --> 00:00:52,530 dass es verfügbar ist, um dies zu installieren Paket und wenn das installiert ist, können Sie 12 00:00:52,620 --> 00:00:54,750 von dort aus Schriftarten 13 00:00:54,750 --> 00:01:02,910 importieren, und ich möchte auch die App-Ladekomponente von expo importieren. Diese Komponente verlängert den Begrüßungsbildschirm, wenn die 14 00:01:02,910 --> 00:01:09,000 App gestartet wird, bis unsere Schriftarten geladen sind, so dass nur wir Sehen 15 00:01:09,000 --> 00:01:14,670 Sie etwas auf dem Bildschirm, wenn alle unsere Assets, und in diesem 16 00:01:14,700 --> 00:01:22,950 Fall die Schriftarten, wirklich verfügbar und wirklich vorhanden sind. Nachdem diese Importe hinzugefügt wurden, können wir hier außerhalb unserer 17 00:01:23,250 --> 00:01:25,130 Komponentenfunktion eine Funktion 18 00:01:25,310 --> 00:01:30,180 hinzufügen, die ich als Fetch-Schriftarten bezeichne. Diese Funktion verwendet am Ende 19 00:01:30,600 --> 00:01:39,190 die Schriftart. Was ich hier importiere, wird asynchron geladen und dann wir Übergeben Sie ein Objekt, in dem wir die 20 00:01:39,190 --> 00:01:47,110 Daten beschreiben, die wir laden möchten, und das ist die Open-Sans-Schriftart, die ich unter Open Sans registrieren werde. Wir 21 00:01:47,110 --> 00:01:57,890 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 22 00:01:57,890 --> 00:02:05,470 ist die andere Schriftart, die ich registrieren möchte, indem ich sie von Assets / Fonts / 23 00:02:05,470 --> 00:02:08,210 OpenSans-Bold benötige. ttf, so. 24 00:02:08,440 --> 00:02:14,320 Jetzt müssen wir dies zurückgeben, da das Laden von Async ein Versprechen zurückgibt und ich dies in meiner Funktion 25 00:02:14,320 --> 00:02:20,410 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 26 00:02:20,410 --> 00:02:22,430 Sie zuvor im Kurs kennengelernt haben. 27 00:02:22,450 --> 00:02:23,970 Falls dies für 28 00:02:24,010 --> 00:02:28,040 Sie brandneu ist, lesen Sie zuerst die anderen Abschnitte dieses Kurses. 29 00:02:28,060 --> 00:02:34,840 Jetzt können wir Fetch-Schriftarten mit App-Laden verwenden und dies innerhalb unserer App-Komponente tun. Dort werde ich 30 00:02:34,840 --> 00:02:41,680 einen bestimmten Status verwalten und dies mithilfe des useState-Hooks, den wir aus React importieren, und ich werde 31 00:02:42,610 --> 00:02:51,760 dies benennen Geben Sie die geladene Schriftart ein und setzen Sie die geladene Schriftart und rufen Sie useState auf. Zunächst ist dies falsch, 32 00:02:51,790 --> 00:02:54,260 da die Schriftart anfangs nicht 33 00:02:54,400 --> 00:03:00,100 geladen wurde. Hier können wir überprüfen, ob die Schriftart nicht geladen wurde, was anfangs 34 00:03:00,100 --> 00:03:07,270 der Fall ist. Dann möchte ich zurückkehren Die App-Ladekomponente anstelle meines normalen App-Inhalts, da wir in der App-Ladekomponente 35 00:03:07,600 --> 00:03:14,600 die asynchrone Start-Eigenschaft hinzufügen und auf Abruf-Schriftarten zeigen können, wodurch diese Funktion zum Abrufen von Schriftarten gestartet 36 00:03:14,860 --> 00:03:21,430 wird. Sobald dies erledigt ist, wird die Funktion an onFinish übergeben aufgerufen und in dieser Funktion 37 00:03:21,430 --> 00:03:29,240 setze ich einfach die geladene Schriftart auf true, so. Dies stellt also sicher, dass wir den Begrüßungsbildschirm einfach geöffnet 38 00:03:29,240 --> 00:03:35,600 lassen, bis unsere Schriftarten geladen sind. Dieser wird gerendert, bis wir unsere Schriftarten neu geladen 39 00:03:35,840 --> 00:03:42,590 haben. Danach laden wir stattdessen diesen Inhalt. Jetzt stellen wir sicher, dass wir unsere Schriftarten importieren und 40 00:03:42,590 --> 00:03:45,870 sie verwenden können und sie in diesem Modul benötigen. 41 00:03:45,980 --> 00:03:52,280 Damit ist es jetzt an der Zeit, tatsächlich das hinzuzufügen, wofür wir alle gekommen sind, die Navigation.