1 00:00:02,520 --> 00:00:08,550 Bevor wir mit dem Erstellungs- oder Veröffentlichungsprozess fortfahren und ihn daher in die App Stores bringen, 2 00:00:08,550 --> 00:00:10,300 konfigurieren wir ihn weiter. 3 00:00:10,300 --> 00:00:15,330 Zum einen gibt es hier einige Leerzeichen wie die fehlende Beschreibung, die Sie hinzufügen 4 00:00:15,330 --> 00:00:16,440 können, indem 5 00:00:16,440 --> 00:00:21,540 Sie hier einen Beschreibungsschlüssel mit Text hinzufügen. Dies ist die Beschreibung, die hier angezeigt wird. 6 00:00:21,660 --> 00:00:24,640 Wichtig, das ist keine Beschreibung, die in den App 7 00:00:24,640 --> 00:00:28,950 Stores angezeigt wird. Das ist wirklich nur eine Beschreibung, die hier angezeigt wird. Sie 8 00:00:28,950 --> 00:00:34,200 können mehr über die Beschreibung und alle anderen Schlüssel erfahren, die Sie hier auf dieser Seite festlegen können. 9 00:00:34,230 --> 00:00:37,110 Es gibt schließlich viele Einstellungen, die Sie vornehmen können. 10 00:00:37,110 --> 00:00:42,780 Was mich jetzt interessiert, ist der Symbol- und Begrüßungsbildschirm-Teil, da dies das Symbol ist, das die Leute 11 00:00:42,780 --> 00:00:44,610 auf dem Startbildschirm sehen werden, 12 00:00:44,610 --> 00:00:49,920 natürlich noch nicht, weil wir die Apps derzeit nicht im App Store veröffentlichen, aber das 13 00:00:50,700 --> 00:00:51,670 wird sich 14 00:00:51,690 --> 00:00:54,140 ändern und der Begrüßungsbildschirm, genau das sehen 15 00:00:54,330 --> 00:00:58,620 Benutzer, wenn unsere App geladen wird, und beides möchten Sie normalerweise anpassen. 16 00:00:58,680 --> 00:01:05,810 Jetzt bietet Ihnen die Expo ein Symbol und einen Begrüßungsbildschirm, aber beide sind nur leere Platzhalter, richtig. Das 17 00:01:05,820 --> 00:01:08,720 ist also nicht allzu erstaunlich. Stattdessen 18 00:01:08,730 --> 00:01:12,590 möchten wir hier unser eigenes Symbol, unser eigenes Begrüßungsbildschirmbild, bereitstellen. 19 00:01:12,600 --> 00:01:17,850 Jetzt sind Sie sehr flexibel in Bezug auf das, was Sie hier bereitstellen. Im Allgemeinen 20 00:01:17,850 --> 00:01:22,840 ist es jedoch eine gute Idee, ein Symbol in der Auflösung 1024 x 1024 21 00:01:22,890 --> 00:01:30,720 bereitzustellen. Sie können also ein quadratisches Symbol als Eingabe und für den Begrüßungsbildschirm einen Begrüßungsbildschirm als erstellen In den offiziellen Dokumenten wird 22 00:01:30,720 --> 00:01:35,550 beschrieben, wo Sie mehr darüber erfahren können, wie Sie einen solchen Begrüßungsbildschirm erstellen, 23 00:01:35,550 --> 00:01:38,520 wie Sie ihn strukturieren und so weiter. 24 00:01:38,520 --> 00:01:45,600 Jetzt habe ich etwas für Sie vorbereitet, mit dem Sie jetzt folgen können, das Sie nicht für die echte Bereitstellung verwenden sollten, da 25 00:01:45,660 --> 00:01:51,930 diese Assets nur für diesen Kurs bestimmt sind und nicht für Sie in Ihrer App, die Sie bereitstellen möchten, und 26 00:01:51,930 --> 00:01:57,870 für die angehängte App, die Sie finden die Symbole. zip-Datei. 27 00:01:58,000 --> 00:02:04,270 Wenn Sie dies jetzt entpacken, finden Sie dort einen Ort. PNG-Datei, die Sie natürlich per Drag & Drop in den 28 00:02:04,270 --> 00:02:05,500 Assets-Ordner ziehen können, 29 00:02:05,500 --> 00:02:08,840 können Sie auch das Symbol löschen. PNG-Datei dort, wenn Sie wollen. 30 00:02:08,890 --> 00:02:15,460 Sie können den Splash auch löschen. PNG-Datei, da sich in diesem angehängten Ordner 31 00:02:15,580 --> 00:02:19,720 auch dieses Begrüßungssymbol befindet. PNG-Datei, die Sie natürlich auch hier ziehen und ablegen können. 32 00:02:19,720 --> 00:02:24,030 Dies sind nur einige Symbole, die ich erstellt habe und die wir jetzt und zurück 33 00:02:24,280 --> 00:02:29,590 in der App verwenden können. json Datei können wir jetzt auf die benutzerdefinierten Symbole zeigen. Wichtig, Sie sollten PNG-Dateien 34 00:02:29,600 --> 00:02:31,720 bereitstellen, wie ich es hier mache. 35 00:02:31,720 --> 00:02:38,170 Nun können wir für das Symbol auf Assets / Orte zeigen. png und für den Splash können wir 36 00:02:38,260 --> 00:02:46,840 auf das Assets / splash_icon verweisen. png. Jetzt können wir als Hintergrundfarbe eine dunkelschwarze Farbe 37 00:02:46,840 --> 00:02:47,940 wie Hex-Code 38 00:02:48,010 --> 00:02:55,180 # 171717 verwenden. Dies sollte eine Hex-Code-Farbe wie diese sein, und der Größenänderungsmodus kann hier so eingestellt werden, dass sie 39 00:02:55,180 --> 00:03:00,610 enthält oder abdeckt. Cover wird das zu übernehmende Symbol grundsätzlich dehnen Die volle verfügbare 40 00:03:00,610 --> 00:03:06,190 Breite und Höhe enthält die Symbolgröße, zentriert sie und hat diese Hintergrundfarbe hinter dem Symbol. 41 00:03:06,190 --> 00:03:10,090 Wenn wir das jetzt tun, können wir das Ergebnis bereits sehen, wenn 42 00:03:10,240 --> 00:03:18,730 wir dies nur npm starten, also startet der Server, wie wir es in diesem Kurs oder auf dieser Messe oft getan haben, und wir starten dies dann auf 43 00:03:18,730 --> 00:03:26,010 einem Emulator, Android oder iOS erneut wie ich mache es hier. Jetzt wird es dort gestartet und jetzt sehen Sie, dies ist der 44 00:03:26,200 --> 00:03:31,510 Begrüßungsbildschirm, auf dem bereits ein neuer aufgenommen wurde. Das Bild dort ist unser großes, aber das ist absichtlich 45 00:03:31,520 --> 00:03:35,920 so, dass wir es klar sehen können und die Hintergrundfarbe etwas anders ist dass Sie 46 00:03:35,920 --> 00:03:40,180 auch die Chance haben, das zu sehen, können Sie natürlich dieselbe Farbe auswählen, um 47 00:03:40,180 --> 00:03:42,480 hier einen nahtlosen Begrüßungsbildschirm zu erhalten. 48 00:03:42,520 --> 00:03:45,510 Das funktioniert also und warten wir, bis das 49 00:03:45,710 --> 00:03:50,160 beendet ist. Hier läuft die App. Jetzt sehen Sie auch hier Ihr Symbol, 50 00:03:50,170 --> 00:03:55,240 wenn Sie in den Task-Umschalter gehen. Sie sehen, es sieht mit dem Hintergrund nicht so 51 00:03:55,240 --> 00:03:56,720 gut aus, aber das können wir 52 00:03:56,740 --> 00:04:02,740 verbessern, aber hier ist das Symbol im Allgemeinen. Damit es funktioniert, sehen wir sowohl den Begrüßungsbildschirm als auch das Symbol und unter 53 00:04:02,770 --> 00:04:05,610 iOS wäre es dasselbe. Wie Sie jetzt sehen können, 54 00:04:05,610 --> 00:04:08,230 sieht das Symbol auf Android allerdings nicht so gut aus. 55 00:04:08,250 --> 00:04:13,260 Der Grund dafür ist, dass Android abhängig von der Version von Android, die Sie 56 00:04:13,650 --> 00:04:20,310 auf Ihrem Gerät ausführen, unterschiedliche Symbole verwendet. Neuere neuere Versionen von Android verwenden diese sogenannten adaptiven Symbole. Dies 57 00:04:20,310 --> 00:04:25,980 sind diese abgerundeten Symbole, bei denen Sie Ihr Symbol in der Mitte haben und dann einige 58 00:04:25,980 --> 00:04:28,060 Hintergrundfarben oder ein Hintergrundbild sogar 59 00:04:28,110 --> 00:04:30,900 dahinter, ältere Versionen würden quadratische Symbole verwenden. 60 00:04:30,900 --> 00:04:38,930 Jetzt können Sie dies berücksichtigen, indem Sie eine detailliertere Konfiguration für Android und auf 61 00:04:39,000 --> 00:04:45,770 Wunsch auch für iOS bereitstellen. Anstatt diesen allgemeinen Symbolschlüssel hier zu haben, können Sie plattformspezifische Einstellungen vornehmen, und 62 00:04:45,770 --> 00:04:48,800 das haben Sie natürlich auch in den offiziellen Dokumenten gelernt. 63 00:04:48,870 --> 00:04:55,380 Dort finden Sie Informationen darüber, wie Sie Icon Splash konfigurieren können. Das ist schön, 64 00:04:55,380 --> 00:05:01,150 aber auch, wie Sie iOS auf eine bestimmte Weise konfigurieren können. 65 00:05:01,260 --> 00:05:07,310 Dort können Sie ein Icon-spezifisches Symbol einrichten, wenn Sie dies verwenden möchten. 66 00:05:07,480 --> 00:05:13,710 Das Gleiche gilt natürlich auch für den Begrüßungsbildschirm. Sie können also grundsätzlich einen iOS-Knoten zu Ihrer Konfiguration 67 00:05:13,720 --> 00:05:21,910 hinzufügen. Wir haben bereits hier und dort, dass Sie auch ein Symbol und dann auch eine Begrüßungskonfiguration hinzufügen können, die genau aussieht 68 00:05:21,910 --> 00:05:27,450 oder welche würde genau so aussehen wie die Root-Konfiguration, die wir hier haben, aber 69 00:05:27,520 --> 00:05:33,730 jetzt können Sie diese allgemeinen Einstellungen auf Root-Ebene grundsätzlich überschreiben und ein bestimmtes Symbol für iOS und 70 00:05:33,730 --> 00:05:36,170 einen bestimmten Begrüßungsbildschirm für iOS haben. 71 00:05:36,190 --> 00:05:41,620 Das können Sie also tun, und das gilt auch für Android, und das finden Sie natürlich auch in 72 00:05:41,620 --> 00:05:42,820 den offiziellen Dokumenten. 73 00:05:43,000 --> 00:05:49,050 Sie können Ihrer App hier einen Android-Schlüssel hinzufügen. json-Datei und dann enthält dies sozusagen ein Objekt. Dort 74 00:05:49,060 --> 00:05:55,780 können Sie auch ein Symbol und eine Begrüßungskonfiguration einrichten, wie ich es für iOS erklärt habe. Jetzt werden diese 75 00:05:55,840 --> 00:05:58,900 Einstellungen für Android und iOS übernommen, da es keine 76 00:05:59,140 --> 00:06:04,120 spezifischen Einstellungen gibt In meinem Beispiel würde hier immer noch die allgemeinen Einstellungen dort 77 00:06:04,120 --> 00:06:05,190 oben verwendet. 78 00:06:05,200 --> 00:06:10,690 Das Interessante ist nun, dass Sie für Android nicht nur einen bestimmten Symbol-Begrüßungsbildschirm festlegen 79 00:06:10,780 --> 00:06:18,580 können, sondern auch ein adaptives Symbol mit der Konfiguration für adaptive Symbole, die für iOS nicht verfügbar ist, da 80 00:06:18,580 --> 00:06:21,820 adaptive Symbole nur für Android verfügbar sind. 81 00:06:21,820 --> 00:06:29,450 Das adaptive Symbol verwendet ein Javascript-Objekt sozusagen als Konfigurationswert, nicht als Zeichenfolge, und dieses Objekt 82 00:06:29,680 --> 00:06:35,950 kann drei Schlüssel haben - ein Vordergrundbild, eine Hintergrundfarbe oder ein Hintergrundbild. 83 00:06:35,950 --> 00:06:40,960 Jetzt haben Sie entweder eine Hintergrundfarbe oder ein Hintergrundbild, aber Sie sollten immer ein 84 00:06:40,960 --> 00:06:41,850 Vordergrundbild haben. 85 00:06:41,890 --> 00:06:46,780 Jetzt können wir hier ein Vordergrundbild hinzufügen, also diesen Schlüssel hier und die 86 00:06:46,780 --> 00:06:53,410 Hintergrundfarbe, die ein sechsstelliger Hex-Code sein sollte, wie Sie sehen können, und lassen Sie uns das hier schnell 87 00:06:53,520 --> 00:06:59,590 tun. Jetzt können wir die Hintergrundfarbe so einstellen, dass wir sagen, dass # 171717 Code und 88 00:06:59,590 --> 00:07:04,750 der Das Vordergrundbild kann jetzt auf unser Symbol eingestellt werden. Dafür würde ich empfehlen, 89 00:07:04,750 --> 00:07:07,900 dass Sie ein bestimmtes Symbol verwenden, das Sie 90 00:07:08,020 --> 00:07:16,990 auch hier im Anhang finden, das ortsadaptive. PNG-Datei, die Sie per Drag & Drop in Ihren Assets-Ordner ziehen können und die ortsadaptiv ist. Die PNG-Datei kann jetzt hier als 91 00:07:17,410 --> 00:07:23,800 Vordergrundbild verwendet werden, sodass wir auf Assets zeigen und dann ortsadaptiv arbeiten 92 00:07:23,830 --> 00:07:25,630 können. png. 93 00:07:25,690 --> 00:07:30,550 Jetzt ist dieses Symbol, das ortsadaptive Symbol, transparent, es ist immer noch das 94 00:07:30,550 --> 00:07:34,990 Symbol, aber es hat im Gegensatz zum anderen Symbol einen transparenten Hintergrund, 95 00:07:34,990 --> 00:07:39,640 sodass Android es automatisch vor diese von Ihnen bereitgestellte Hintergrundfarbe oder dieses Hintergrundbild 96 00:07:39,640 --> 00:07:43,650 stellen kann um die Ecken für dich und so weiter. 97 00:07:43,660 --> 00:07:51,400 Wenn wir dies jetzt speichern und dies daher neu erstellt wird und um sicherzugehen, dass dies wirklich berücksichtigt wird, 98 00:07:51,430 --> 00:07:53,910 starte ich meinen Expo-Server hier neu. 99 00:07:54,040 --> 00:08:00,370 Wenn wir dies jetzt auf Android starten und dafür auch den Expo-Client hier schließen und dann 100 00:08:03,390 --> 00:08:05,490 auf Android erneut ausführen, 101 00:08:05,490 --> 00:08:08,990 sollten wir sehen, dass wir nach dem Neustart 102 00:08:09,000 --> 00:08:12,540 jetzt ein schöneres Symbol haben, das etwas besser aussieht. 103 00:08:12,600 --> 00:08:14,060 Warten wir also, bis das 104 00:08:14,070 --> 00:08:19,560 gestartet wird. Dies ist immer noch der Begrüßungsbildschirm, wie wir ihn zuvor eingerichtet haben. Ich habe auch keinen Android-spezifischen Begrüßungsbildschirm eingestellt, den 105 00:08:19,560 --> 00:08:21,700 wir natürlich konnten, aber hier habe ich nicht, 106 00:08:21,720 --> 00:08:25,810 also haben wir natürlich den gleichen Begrüßungsbildschirm wie zuvor in diesem Modul und wenn Sie sich 107 00:08:26,110 --> 00:08:31,440 jetzt das Symbol ansehen, sehen Sie möglicherweise immer noch das alte. Die neue App wird jedoch berücksichtigt, 108 00:08:31,440 --> 00:08:37,320 sobald wir diese App als eigenständige App erstellt und an die App Stores verteilt haben. 109 00:08:38,100 --> 00:08:43,110 Im Allgemeinen wird empfohlen, dass Sie für Android ein solches adaptives Symbol festlegen, da 110 00:08:43,110 --> 00:08:49,470 Sie mehr Android-Versionen behandeln, was natürlich nicht schadet. Das Festlegen eines solchen allgemeinen Symbols ist ebenfalls keine schlechte Idee, und 111 00:08:49,470 --> 00:08:50,040 natürlich 112 00:08:50,070 --> 00:08:54,780 können wir entweder ein und dasselbe Symbol für iOS und Android verwenden oder Sie legen bestimmte Symbole für 113 00:08:54,810 --> 00:09:01,110 iOS und Android fest, wie für Android möglicherweise das adaptive Symbol erwähnt. Wenn Sie mehr über das Erstellen und Verwalten 114 00:09:01,110 --> 00:09:06,180 von Symbolen und Begrüßungsbildschirmen erfahren möchten, finden Sie im Anhang die offiziellen Ausstellungsdokumente, die sich 115 00:09:06,180 --> 00:09:11,160 eingehend mit den verschiedenen Optionen befassen, die Sie dort haben, und was Sie beachten sollten.