1 00:00:02,290 --> 00:00:09,430 Nachdem die allgemeine Spielelogik funktioniert, konzentrieren wir uns nun mehr darauf, das Styling fertigzustellen und unsere eigenen benutzerdefinierten 2 00:00:09,700 --> 00:00:16,180 Schriftarten und ein schönes kleines Bild auf dem Spielbildschirm über dem Bildschirm hinzuzufügen, da die 3 00:00:16,180 --> 00:00:23,530 Arbeit mit Bildern und die Arbeit mit benutzerdefinierten Schriftarten in der heutigen Zeit typisch ist Bei der App-Entwicklung 4 00:00:23,530 --> 00:00:30,520 möchten Sie sich natürlich selten an die Standard-Systemschriftarten halten, und selten haben Sie eine App ohne Bilder. 5 00:00:30,520 --> 00:00:37,390 Beginnen wir also mit benutzerdefinierten Schriftarten. In einer React Native-Ausstellung ist das Hinzufügen von Schriftarten sehr trivial. 6 00:00:38,200 --> 00:00:40,820 Erstellen Sie in Ihrem 7 00:00:40,870 --> 00:00:47,000 Projektordner im Assets-Ordner einen Schriftartenordner. Sie können das zwar überall speichern, aber 8 00:00:47,050 --> 00:00:52,560 ich möchte es im Assets-Ordner behalten, damit meine Assets wie Schriftarten und Bilder organisiert bleiben. 9 00:00:53,080 --> 00:00:58,270 Hier im Ordner "Schriftarten" möchte ich meine Schriftarten überraschenderweise verwalten. Im Anhang finden Sie 10 00:00:58,270 --> 00:01:03,460 eine Zip-Datei mit zwei Schriftarten, die Sie einfach extrahieren und dann per Drag 11 00:01:03,560 --> 00:01:06,730 & Drop hierher ziehen können. Das ist OpenSans-Bold 12 00:01:06,730 --> 00:01:12,790 und OpenSans-Regular Diese beiden Schriftarten werden in einer Zip-Datei an dieses Video angehängt, extrahiert und in 13 00:01:12,790 --> 00:01:14,100 den Schriftartenordner gezogen. 14 00:01:14,110 --> 00:01:22,390 Damit sind diese Schriftarten allgemein verfügbar, aber um sie zu verwenden, müssen Sie noch weitere konfigurieren. 15 00:01:22,460 --> 00:01:29,780 Sie müssen zu Ihrer App gehen. js-Datei und weisen Sie React Native und expo an, diese Schriftarten 16 00:01:29,810 --> 00:01:37,920 zu laden, um sie zu verwenden. Dafür in der App. js Datei und ich benutze die App. js-Datei, da dies die 17 00:01:38,010 --> 00:01:43,560 erste Datei ist, die geladen oder ausgeführt wird, sozusagen beim Start der App, und 18 00:01:43,590 --> 00:01:51,060 Sie Ihre Schriftarten beim Start der App laden möchten. Dort müssen Sie einen Import hinzufügen, und beim Import wird 19 00:01:51,060 --> 00:01:58,630 alles importiert Als Schriftart, obwohl dieser Name hier bei Ihnen liegt, verwenden Sie hier normalerweise die Schriftart von expo-font. 20 00:01:59,140 --> 00:02:07,380 Expo-font ist also ein Paket, das Ihnen Schriftarten-Dienstprogramme bietet, also Dienstprogramme, mit denen Sie Schriftarten laden und alles aus 21 00:02:07,800 --> 00:02:13,140 diesem Paket importieren und in diesem Schriftartenobjekt bündeln können. Genau das tun 22 00:02:13,140 --> 00:02:15,800 wir hier. Um nun 23 00:02:15,950 --> 00:02:21,920 Schriftarten zu laden, füge ich eine neue Funktion außerhalb der Funktionskomponente hinzu, da 24 00:02:21,920 --> 00:02:26,580 diese Funktion nicht für jeden Komponenten-Rendering-Zyklus neu erstellt werden muss. 25 00:02:26,610 --> 00:02:27,860 Jetzt werde ich es 26 00:02:27,870 --> 00:02:29,060 Fetch Fonts nennen, 27 00:02:29,330 --> 00:02:31,190 der Name liegt bei Ihnen und 28 00:02:34,010 --> 00:02:38,640 in dieser Funktion hier werde ich Font aufrufen. loadAsync. 29 00:02:38,710 --> 00:02:43,810 Dies ist eine Funktion oder eine Methode für das Schriftpaket, die wir hier importieren, mit 30 00:02:43,810 --> 00:02:52,050 der Sie Schriftarten laden können. Was Sie zum Laden von Async übergeben, ist ein Objekt, bei dem Sie Expo und damit React Native 31 00:02:52,120 --> 00:02:57,010 über alle gewünschten Schriftarten informieren Belastung. Sie tun dies, indem Sie einen Schlüssel verwenden, 32 00:02:57,310 --> 00:03:02,710 mit dem Sie einen beliebigen Namen Ihrer Wahl auswählen, z. B. open-sans. Später können Sie diese Schriftarten mit diesen 33 00:03:02,710 --> 00:03:06,400 Namen verwenden. Öffnen Sie hier also sans, da meine Schriftart open sans heißt. 34 00:03:06,400 --> 00:03:10,510 Hier ist es also ohne Sans geöffnet, und dann fügen Sie erforderlich 35 00:03:10,840 --> 00:03:17,180 hinzu. Dies ist eine Sprachfunktion, die Javascript bietet, wenn Sie auf den Pfad zeigen, in dem diese Schriftart gespeichert ist. 36 00:03:17,200 --> 00:03:18,310 Das ist ein 37 00:03:18,340 --> 00:03:20,820 relativer Pfad, also zeige ich hier auf 38 00:03:20,850 --> 00:03:28,760 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 39 00:03:28,760 --> 00:03:36,210 zu diesem Objekt hinzu, das ich zum Laden von Async übergebe, und das könnte offen ohne Fettdruck sein. 40 00:03:36,210 --> 00:03:40,660 Jetzt liegen diese Namen ganz bei Ihnen und dort möchte ich die fette Version laden. 41 00:03:41,290 --> 00:03:48,160 Damit teilen wir React Native am Ende mit, wo unsere Schriftarten leben, wo diese Schriftdateien leben und welchen Namen wir sie zuordnen möchten, 42 00:03:48,160 --> 00:03:56,650 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 43 00:03:56,770 --> 00:04:03,550 bedeutet, dass dies etwas länger dauert, nicht sehr lange, aber es wird nicht sofort geladen, und ich werde dieses 44 00:04:03,550 --> 00:04:09,360 Versprechen hier innerhalb von Abrufschriftarten zurückgeben, damit wir warten können, wann immer wir Abrufschriftarten aufrufen 45 00:04:09,360 --> 00:04:15,600 für dieses Versprechen zu lösen, bevor wir fortfahren. Wo wollen wir 46 00:04:15,600 --> 00:04:19,610 nun unsere Schriften abrufen? 47 00:04:19,670 --> 00:04:26,720 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 48 00:04:26,720 --> 00:04:28,180 abrufen, aber das Problem 49 00:04:28,190 --> 00:04:34,220 ist, wir würden weiter rendern und wir würden schließlich unseren Inhalt rendern und wenn irgendwo im Inhalt, Wir verwenden 50 00:04:34,220 --> 00:04:38,190 Text, der versucht, eine solche Schriftart zu verwenden. Wenn die Schriftart noch nicht 51 00:04:38,300 --> 00:04:43,850 geladen wurde und wie gesagt, dauert es nur ein paar Millisekunden, aber für den ersten Renderzyklus wurde 52 00:04:43,850 --> 00:04:50,660 die Schriftart möglicherweise nicht geladen Wir würden einen Fehler bekommen. Das Laden unserer Schriftarten wie diese 53 00:04:50,660 --> 00:04:55,400 wird daher nicht empfohlen, es wird sehr wahrscheinlich nicht funktionieren. 54 00:04:55,430 --> 00:05:03,310 Stattdessen gibt es eine spezielle Komponente, die Sie zum Laden Ihrer Schriftarten verwenden können. Sie importieren diese Komponente 55 00:05:03,310 --> 00:05:10,450 von expo und der Name dieser Komponente lautet AppLoading. 56 00:05:10,460 --> 00:05:17,480 Dies ist eine Komponente, die den Standard-Ladebildschirm im Grunde verlängert. Die Benutzer des Begrüßungsbildschirms sehen sowieso, wenn 57 00:05:17,570 --> 00:05:24,860 die App gestartet wird. Sie verlängert diesen Bildschirm, um aktiv zu bleiben, bis eine bestimmte Aufgabe Ihrer 58 00:05:24,860 --> 00:05:26,150 Wahl erledigt 59 00:05:26,150 --> 00:05:29,610 ist, beispielsweise bis zum Abrufen von Schriftarten erledigt. 60 00:05:29,960 --> 00:05:35,180 Beim AppLoading müssen wir in der App-Komponente nur noch sicherstellen, dass 61 00:05:35,190 --> 00:05:41,520 wir diese Komponente anstelle unseres eigentlichen Inhalts rendern, solange wir unsere Schriftarten noch nicht 62 00:05:41,520 --> 00:05:43,650 geladen haben oder solange 63 00:05:43,740 --> 00:05:49,000 wir noch nicht mit dem Laden fertig sind wir wollten laden. 64 00:05:49,120 --> 00:05:55,390 Das Coole ist, wir können den Status dafür verwenden und mit dem Anfangswert false beginnen, 65 00:05:55,390 --> 00:06:04,240 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. 66 00:06:04,350 --> 00:06:11,880 Hier möchte ich überprüfen, ob die geladenen Daten nicht wahr sind, daher das Ausrufezeichen. Dann weiß ich, dass die Daten noch nicht 67 00:06:11,880 --> 00:06:16,760 geladen wurden, und das ist anfangs der Fall. In diesem Fall werde ich nicht 68 00:06:16,920 --> 00:06:17,580 einmal 69 00:06:17,640 --> 00:06:25,170 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 70 00:06:25,170 --> 00:06:32,340 anderen Inhalt rendern möchte, wenn wir unsere Daten noch laden. 71 00:06:32,340 --> 00:06:40,740 Jetzt ist AppLoading eine Komponente von Expo, die eine asynchrone Start-Requisite verwendet, bei der wir auf die Operation zeigen, die wir beim 72 00:06:40,740 --> 00:06:46,200 ersten Rendern starten möchten, und das ist natürlich unsere Funktion zum Abrufen von Schriftarten. 73 00:06:46,200 --> 00:06:49,480 Hier zeige ich also auf Abrufschriften, auf diese Funktion. 74 00:06:49,500 --> 00:06:51,290 Nun wichtig, a) dies muss 75 00:06:51,630 --> 00:06:57,420 eine Funktion sein, die Sie hier übergeben, und b) es muss eine Funktion sein, die ein 76 00:06:57,700 --> 00:07:01,980 Versprechen zurückgibt, da die Expo dieses Versprechen automatisch für Sie hört und 77 00:07:01,980 --> 00:07:09,240 wenn das Versprechen aufgelöst wird, weiß sie, dass das Laden erfolgt Wenn dies erledigt ist, wird alles, was Sie hier übergeben, 78 00:07:09,240 --> 00:07:10,770 an onFinish aufgerufen. 79 00:07:10,770 --> 00:07:17,530 Hier müssen Sie also eine Funktion übergeben, die dann die geladenen Daten auf true setzt. 80 00:07:17,610 --> 00:07:23,160 Diese Funktion hier wird also für Sie ausgeführt, wenn dieser Vorgang abgeschlossen ist, und damit die 81 00:07:23,160 --> 00:07:24,120 Messe herausfindet, 82 00:07:24,120 --> 00:07:27,360 wann dies ausgeführt wird, sollte dies ein Versprechen zurückgeben. 83 00:07:27,380 --> 00:07:33,760 Jetzt arbeiten diese beiden Requisiten zusammen und wir aktualisieren die geladenen Daten. Dieser Status ist wahr und daher wird dieser Inhalt 84 00:07:33,760 --> 00:07:39,410 nicht gerendert, sondern mit der Ausführung dieses Codes und schließlich mit dem Rendern des Inhalts dort unten, wenn 85 00:07:39,410 --> 00:07:40,760 das Abrufen unserer 86 00:07:41,060 --> 00:07:47,810 Schriftarten abgeschlossen ist, und Sie Sie können hier jede asynchrone Operation ausführen, aber normalerweise verwenden Sie AppLoading, um einige Assets wie Schriftarten 87 00:07:47,810 --> 00:07:50,690 oder ähnliches zu laden. Daher sollten Assets vorhanden sein, 88 00:07:50,750 --> 00:07:56,030 die beim Start der App vorhanden sein sollten und die Sie sofort benötigen. In der Regel 89 00:07:56,030 --> 00:07:57,770 handelt es sich dabei um Schriftarten. 90 00:07:57,870 --> 00:08:05,710 Jetzt können Sie hier übrigens auch einen onError-Handler hinzufügen, und hier protokolliere ich nur das Fehlerobjekt, 91 00:08:05,710 --> 00:08:07,050 das wir 92 00:08:07,300 --> 00:08:14,470 auch hier erhalten, wenn das Laden fehlschlägt. Natürlich möchten Sie dies möglicherweise nicht nur protokollieren, sondern stattdessen etwas 93 00:08:14,470 --> 00:08:16,570 anderes tun, alternative Inhalte in Ihrer 94 00:08:16,570 --> 00:08:20,230 App anzeigen, so etwas. Hier werde ich es nur protokollieren, 95 00:08:20,230 --> 00:08:25,710 da dies nicht fehlschlagen sollte. Die Schriftarten sind hier lokal verfügbar, sodass sie ohne Probleme geladen werden können. 96 00:08:25,760 --> 00:08:31,330 Wenn wir das speichern, startet unsere App natürlich neu und wir sehen hier keinen Unterschied. Unser Ladebildschirm 97 00:08:31,400 --> 00:08:36,380 dauert auch nicht mehr so lange wie zuvor, da das Laden superschnell ist. Es geschieht 98 00:08:36,380 --> 00:08:37,820 einfach nicht sofort, 99 00:08:37,820 --> 00:08:39,830 deshalb brauchten wir es dieser Ansatz. 100 00:08:39,830 --> 00:08:41,240 Aber jetzt haben wir die 101 00:08:41,240 --> 00:08:43,440 Schriftarten geladen. Wie können wir sie jetzt verwenden? 102 00:08:43,460 --> 00:08:48,980 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 103 00:08:48,980 --> 00:08:57,390 gehen, auf dem dieser Titel am Ende lebt. Hier starten Sie ein neues Spiel, es hat den Titelstil und 104 00:08:57,390 --> 00:09:03,540 daher können wir es jetzt im Stylesheet hier auf Titel einstellen Schriftfamilie, um die 105 00:09:03,630 --> 00:09:08,050 Schriftfamilie zu ändern und diese beispielsweise auf open-sans-fett zu setzen, 106 00:09:08,050 --> 00:09:09,270 und natürlich 107 00:09:09,270 --> 00:09:15,180 muss der hier verwendete Bezeichner ein Bezeichner sein, den Sie hier geladen haben. 108 00:09:15,210 --> 00:09:17,800 Hier habe ich also Open-Sans-Bold und Open Sans. 109 00:09:17,850 --> 00:09:25,180 Ich kann diese beiden Bezeichner in meinem Code überall in der App verwenden, wenn ich eine benutzerdefinierte Schriftart zuweisen möchte, und 110 00:09:25,180 --> 00:09:27,240 genau das mache ich hier. 111 00:09:27,240 --> 00:09:32,940 Nun sehen Sie, dass es eine andere Schriftart gibt, die fett gedruckt ist. Wenn Sie benutzerdefinierte Schriftarten verwenden 112 00:09:32,940 --> 00:09:36,180 und eine fett gedruckte Schriftart möchten, müssen Sie diese mit 113 00:09:36,180 --> 00:09:42,180 der Schriftfamilie laden. Sie können die Schriftstärke nicht festlegen. React Native unterstützt dies, aber für benutzerdefinierte Schriftarten unterstützt expo 114 00:09:42,180 --> 00:09:42,840 dies derzeit 115 00:09:42,840 --> 00:09:47,790 nicht. Stattdessen müssen Sie einfach eine separate Schriftfamilie verwenden, was, wie Sie sehen, kein wirkliches Problem darstellt.