1 00:00:02,270 --> 00:00:07,770 Sich immer wieder zu wiederholen und immer wieder den gleichen detaillierten Look zu setzen, ist wirklich 2 00:00:07,770 --> 00:00:10,550 nervig und definitiv nicht das, was Sie wollen. 3 00:00:10,550 --> 00:00:17,960 Bisher arbeiten wir immer mit Navigationsoptionen, die wir direkt neben unseren Komponenten einrichten. 4 00:00:18,020 --> 00:00:24,040 Jetzt müssen Sie dies nicht mehr für Standardeinstellungen tun, die Sie immer wieder wiederholen. 5 00:00:24,200 --> 00:00:29,740 Diese Einstellung wird hier tatsächlich aus dem Kategorie-Mahlzeit-Bildschirm entfernt und nur der Header-Titel dort beibehalten, da der 6 00:00:29,740 --> 00:00:34,820 Header-Titel natürlich von diesem Bildschirm abhängt und sich mit den verschiedenen Werten ändert, die wir 7 00:00:34,820 --> 00:00:36,310 auf dem Bildschirm erhalten. 8 00:00:36,380 --> 00:00:41,990 Lassen Sie uns daher den Plattformimport entfernen und den Farbkonstantenimport dort auf dem 9 00:00:42,080 --> 00:00:43,370 Kategorienbildschirm hinzufügen. 10 00:00:43,400 --> 00:00:48,530 Ich werde dies ausschneiden, damit sie es weiterhin verwenden können, aber ich werde es daher auch von 11 00:00:48,530 --> 00:00:54,140 diesem Bildschirm entfernen und nur den Header-Titel-Leader behalten, der für diesen Bildschirm spezifisch ist und nicht die Standardeinstellung für 12 00:00:54,440 --> 00:00:59,500 alle Bildschirme, also werde ich das hier und ich behalten kann daher auch hier den Plattformimport und 13 00:00:59,540 --> 00:01:00,710 den Farbinhaltsimport loswerden. 14 00:01:00,740 --> 00:01:06,870 Und jetzt gehen wir zum Essensnavigator, denn neben der Einrichtung von Navigationsoptionen für Ihre Komponenten im nächsten Jahr, 15 00:01:06,870 --> 00:01:12,290 die der richtige Ort für alle Optionen sind, die für diese Komponente spezifisch sind, können Sie 16 00:01:12,290 --> 00:01:15,080 hier auch Optionen direkt im Navigator einrichten. 17 00:01:15,080 --> 00:01:17,830 Sie haben zwei verschiedene Orte, an denen Sie sie einrichten können. 18 00:01:18,170 --> 00:01:23,110 Ein Ort ist, wenn Sie diese komplexere Bildschirmkonfiguration hier verwenden. 19 00:01:23,150 --> 00:01:29,120 Wenn Sie Ihren Bezeichnern neben dem Einrichten des Bildschirms einen Bildschirm zuordnen, was Sie mit nur 20 00:01:29,120 --> 00:01:32,390 einem Musswert laden möchten, den Sie hier haben. 21 00:01:32,450 --> 00:01:39,530 Sie können hier auch Navigationsoptionen hinzufügen und hier einige Navigationsoptionen für diese Bildschirme einrichten. 22 00:01:39,530 --> 00:01:44,810 Dort könnten wir also auch im Header-Stil die Header-Tönungsfarbe und jetzt müssen wir nur noch die Plattform und die 23 00:01:44,810 --> 00:01:45,470 Farben hinzufügen. 24 00:01:45,470 --> 00:01:46,180 Hier importieren. 25 00:01:46,250 --> 00:01:47,490 Also lass uns das schnell machen. 26 00:01:48,050 --> 00:01:52,430 Lassen Sie uns die Plattform von reagieren importieren. 27 00:01:52,460 --> 00:02:03,940 Eingeboren hier und lassen Sie uns auch Farben aus Konstantenfarben importieren. Wenn wir das tun, werden Sie sehen, dass wir auf dem Kategorienbildschirm keine Farbe 28 00:02:03,940 --> 00:02:11,020 haben, weil ich diese Farbe hier nur auf den Kategoriemahlzeiten eingestellt habe, aber wenn wir 29 00:02:11,020 --> 00:02:15,290 zu diesem Bildschirm gehen, dann wir habe diese Färbung. 30 00:02:15,300 --> 00:02:21,060 Wir haben also das gleiche Aussehen wie zuvor und jetzt können wir hier natürlich das Gleiche für den 31 00:02:21,120 --> 00:02:22,130 Kategorienbildschirm tun. 32 00:02:22,230 --> 00:02:29,430 Dort können wir dies nun auch in ein Objekt verwandeln. Fügen Sie daher die Navigationsoptionen hinzu und fügen Sie 33 00:02:29,490 --> 00:02:34,830 genau dieselben Optionen hinzu, sodass hier dasselbe Objekt für diesen Bildschirm angezeigt wird. 34 00:02:34,830 --> 00:02:39,760 Wenn wir das jetzt tun, müssen wir jetzt auch wieder auf dem Kategorienbildschirm färben. 35 00:02:39,870 --> 00:02:46,350 Der kleine Vorteil gegenüber der vorherigen Lösung, dies in jeder Komponentendatei einzurichten, stattdessen haben wir jetzt 36 00:02:46,380 --> 00:02:50,130 zumindest die gesamte Konfiguration und eine in derselben Datei. 37 00:02:50,400 --> 00:02:56,220 Trotzdem wiederholen wir uns, so dass es schön ist, dass Sie dies hier einrichten können. Dies 38 00:02:56,220 --> 00:03:03,330 wäre beispielsweise eine gute Alternative zum Einrichten unseres statisch festgelegten Headertitels für Kategorienkategorien für Kategorien, sodass wir dies hier anstatt 39 00:03:03,810 --> 00:03:09,300 in Komponenten einrichten können weil es sowieso statisch ist, spielt es keine Rolle, wo 40 00:03:09,330 --> 00:03:10,630 wir das einrichten. 41 00:03:10,920 --> 00:03:16,500 Abgesehen davon ist ein solcher Anwendungsfall keine wirkliche Verbesserung, da wir uns immer noch wiederholen. 42 00:03:16,620 --> 00:03:23,550 Also schneide ich das hier noch einmal ab und stattdessen können wir jetzt ein zweites Argument nutzen, das Sie übergeben können, 43 00:03:23,550 --> 00:03:25,820 um den Stack Navigator zu erstellen. 44 00:03:25,920 --> 00:03:29,370 Das erste Argument ist Objekt mit Ihren Bildschirmen. 45 00:03:29,430 --> 00:03:32,990 Mit dem zweiten Argument können Sie diesen Navigator konfigurieren. 46 00:03:33,060 --> 00:03:38,880 Wir haben noch keine Konfigurationsmolkerei eingerichtet und natürlich finden Sie in der offiziellen Box oder wenn ich sie 47 00:03:38,880 --> 00:03:43,710 hier von meinem T bekomme, eine Liste aller Einstellungen, die Sie dort einrichten können. 48 00:03:43,710 --> 00:03:50,070 Eine wichtige Sache, die Sie hier konfigurieren können, sind die Standardnavigationsoptionen. Wie der Name schon 49 00:03:50,310 --> 00:03:55,330 sagt, können Sie damit Optionen einrichten, die für jeden Bildschirm gelten. 50 00:03:55,440 --> 00:04:04,830 Nun nimmt dies Objekt mit Ihren Navigationsoptionen, aber jetzt werden diese Optionen auf jeden Bildschirm in diesem Navigator angewendet, also 51 00:04:05,070 --> 00:04:10,750 auf alle drei Bildschirme hier, damit Sie sich nicht wiederholen müssen. 52 00:04:10,770 --> 00:04:14,940 Wenn wir das jetzt tun, sehen Sie diesen Farbkopf hier. 53 00:04:14,940 --> 00:04:18,920 Auch hier und alles auf dem detaillierten Bildschirm, wenn Sie dorthin gehen. 54 00:04:18,960 --> 00:04:25,200 Auf diese Weise möchten Sie natürlich wiederholte Konfigurationen wie den allgemeinen Stil einrichten, der sich normalerweise 55 00:04:25,200 --> 00:04:27,830 nicht von Bildschirm zu Bildschirm ändert. 56 00:04:27,900 --> 00:04:29,710 Wenn es sich ändert, ist das in Ordnung. 57 00:04:29,760 --> 00:04:35,940 Sie können es pro Komponente oder hier im Bildschirmkonflikt einrichten, wie ich Ihnen gezeigt habe. Wenn sich 58 00:04:35,940 --> 00:04:40,170 dies jedoch nicht ändert, können Sie hier die Standardnavigationsoptionen verwenden. 59 00:04:40,200 --> 00:04:48,720 Dies wirft natürlich auch eine andere Frage auf: Wie werden die Einstellungen hier oder hier mit den Einstellungen 60 00:04:48,720 --> 00:04:51,720 hier oder anstelle einer Komponente zusammengeführt? 61 00:04:51,720 --> 00:04:57,630 Und die Regel ist sehr einfach, da Standardnavigationsoptionen mit Ihren spezifischen Navigationsoptionen 62 00:04:57,630 --> 00:05:05,100 zusammengeführt werden, die hier oder hier in der Komponente eingerichtet wurden, und die spezifischen Optionen immer gewinnen. 63 00:05:05,100 --> 00:05:07,830 Wenn Sie ein und denselben Schlüssel mit demselben Namen haben. 64 00:05:07,830 --> 00:05:15,690 Wenn ich hier also einen Standard-Header-Titel wie einen Bildschirm einrichten würde, der natürlich sehr allgemein gehalten ist, würden Sie 65 00:05:15,690 --> 00:05:17,960 hier immer noch Essenskategorien sehen. 66 00:05:18,060 --> 00:05:24,930 Italienisch hier, aber auf dem detaillierten Bildschirm, auf dem ich keinen bestimmten Header-Titel angegeben habe, wird ein 67 00:05:25,740 --> 00:05:28,800 Bildschirm angezeigt, sodass Ihre Standardnavigationsoptionen überschrieben werden. 68 00:05:28,860 --> 00:05:33,510 Wenn Sie nun beim Konfigurieren des Bildschirms Navigationsoptionen hier einrichten und diese 69 00:05:33,990 --> 00:05:39,630 anstelle der Komponente auf derselben Ebene wirken und die Einstellungen hier auf der Bildschirmebene tatsächlich gewinnen. 70 00:05:39,630 --> 00:05:46,080 Wenn ich also hier den Titel des Headers für Essenskategorien mit mehreren Ausrufezeichen sagte, sehen Sie, dass 71 00:05:46,260 --> 00:05:53,070 hier auf dem Kategorienbildschirm und der Titel, den Sie in der Kategoriebildschirmkomponente eingerichtet haben, möglicherweise nicht gewinnen, etwas 72 00:05:53,070 --> 00:05:55,790 kontraintuitiv ist, aber so ist es. 73 00:05:55,830 --> 00:06:03,280 Wenn Sie also Navigationsoptionen mit demselben Titel oder denselben Namen hier im Bildschirmkontext einrichten, gewinnt der Bildschirmkontext, 74 00:06:03,370 --> 00:06:09,340 aber unabhängig davon, wo Sie ihn einrichten, gewinnt er immer gegen die 75 00:06:09,340 --> 00:06:09,840 Standardnavigationsoptionen. 76 00:06:09,910 --> 00:06:16,640 Wenn Sie den gleichen Titel verwenden, werden Sie hier auch die Navigationsoptionen auf dem Bildschirm meiner Kategorie 77 00:06:16,640 --> 00:06:17,050 entfernen. 78 00:06:17,060 --> 00:06:18,130 Das brauche ich hier nicht. 79 00:06:18,130 --> 00:06:22,900 Ich bin mit dem Einrichten der Bildschirmkomponente zufrieden, aber Sie können es an beiden Stellen einrichten. 80 00:06:22,910 --> 00:06:29,090 Es ist wichtig, dass Sie sich immer daran erinnern, dass Standardoptionen überschrieben werden. Neben den Standardnavigationsoptionen in 81 00:06:29,090 --> 00:06:35,000 diesem zweiten Objekt, das Sie zum Erstellen des SEC-Navigators übergeben, können Sie jetzt auch andere Dinge 82 00:06:35,000 --> 00:06:40,790 konfigurieren, wenn Sie Kontrolle und Platz hatten. Sie sollten hier eine Liste sehen oder alternativ konsultieren 83 00:06:40,820 --> 00:06:42,640 die offizielle Box natürlich. 84 00:06:42,650 --> 00:06:50,060 Normalerweise sind die Standardeinstellungen in Ordnung, aber dort können Sie beispielsweise den Modus einrichten und diesen als Karte auf die modale Standardeinstellung setzen. 85 00:06:50,060 --> 00:06:56,150 Wenn Sie dies einstellen, erhalten Sie einen Modus wie den Übergang zum Laden auf Ihren Bildschirm, was bedeutet, 86 00:06:56,150 --> 00:07:01,310 dass der Bildschirm hineingleitet Anstatt die normale Animation unter Android zu verwenden, sehen Sie keinen 87 00:07:01,310 --> 00:07:04,180 Unterschied, aber unter ISIS werden Sie es tun. 88 00:07:04,340 --> 00:07:10,070 Dies ist nur eine Sache, die Sie hier ändern können, um die Standardanimation zu ändern, falls Sie einen modalen 89 00:07:10,070 --> 00:07:17,850 Übergang anstelle der normalen Push-Pop-Animation wünschen. Hier können Sie auch den anfänglichen Stammnamen standardmäßig ändern. Ich erwähnte, dass dies das erste Schlüsselwertpaar wäre, aber wenn Sie 90 00:07:17,850 --> 00:07:22,410 möchten nicht auf dem Kategorienbildschirm beginnen, aber aus irgendeinem Grund können Sie auf dem 91 00:07:22,590 --> 00:07:27,810 Bildschirm mit den detaillierten Mahlzeiten hier einfach auf die Details der Mahlzeiten verweisen, anstatt auf Kategorien, die 92 00:07:27,810 --> 00:07:32,340 Sie nicht einrichten müssen, da dies eine Standardeinstellung ist und Sie damit beginnen würden 93 00:07:32,460 --> 00:07:33,510 Bildschirm als Startbildschirm. 94 00:07:33,510 --> 00:07:38,440 Natürlich können Sie jetzt nicht zurückgehen, da dies Ihr Startbildschirm ist, der einzige Bildschirm, auf dem der Stapel ausgeführt wird. 95 00:07:38,580 --> 00:07:42,120 Das Zurückgehen wird jetzt also nicht funktionieren. 96 00:07:42,160 --> 00:07:48,030 Ich werde dies wieder auf Kategorien zurücksetzen und Sie müssen dies nicht hinzufügen, da dies sowieso eine Standardeinstellung ist. 97 00:07:48,040 --> 00:07:51,600 Standardmäßig wird das erste Schlüsselwertpaar verwendet. 98 00:07:51,600 --> 00:07:56,580 Daher haben wir uns kurz einige Optionen angesehen, die Sie konfigurieren 99 00:07:56,580 --> 00:08:01,860 und vor allem Navigationsoptionen und Standardnavigationsoptionen hinzufügen können. Dies ist sehr wichtig, um 100 00:08:01,860 --> 00:08:09,650 gut aussehende und effiziente Anwendungen zu erstellen, ohne sich immer wieder zu wiederholen, was Sie natürlich nicht möchten Apropos Effizienz: 101 00:08:09,650 --> 00:08:15,990 Wenn Sie mit der Reaktionsnavigation arbeiten, möchten Sie noch etwas anderes tun, oder Sie fragen sich. 102 00:08:16,010 --> 00:08:26,010 Bedenken Sie, dass Sie ein zusätzliches Paket installiert haben, das native Bildschirme reagiert, auf denen standardmäßig Expo-Apps enthalten 103 00:08:26,010 --> 00:08:27,700 sein sollten. 104 00:08:27,720 --> 00:08:35,850 Trotzdem schadet es nicht, es explizit zu installieren, sodass Sie tatsächlich sicherstellen können, 105 00:08:35,850 --> 00:08:45,310 dass unter der Haube die reaktionsfähige Navigation native optimierte Bildschirmkomponenten verwendet, die von Android bereitgestellt werden. 106 00:08:45,350 --> 00:08:51,460 Ich war auf Android, es verwendet D das Fragment, falls Sie ein bisschen in der Android-Entwicklung sind, und auf 107 00:08:51,460 --> 00:08:57,220 Ayahuasca verwendet es den UI View Controller und das verbessert einfach die Leistung ein bisschen mehr. 108 00:08:57,300 --> 00:09:04,350 Hier in dieser einfachen App werden Sie es nicht spüren, aber es ist eine gute Praxis, dieses spezielle Paket oder D spezielle 109 00:09:04,350 --> 00:09:05,580 Bildschirme zu verwenden. 110 00:09:05,580 --> 00:09:12,190 Um dies zu verwenden, sollten Sie zu einem Ort gehen, der ausgeführt wird, bevor Sie Ihren 111 00:09:12,200 --> 00:09:21,510 ersten Bildschirm rendern, der uns in unserem Fall hier und da eine Datei erfassen soll. Sie können jetzt Verwendungsbildschirme aus dem React Native-Bildschirm importieren. 112 00:09:21,510 --> 00:09:27,750 Von diesem Paket aus haben Sie es also gerade installiert und nach Ihren Importen aufgerufen, bevor Sie etwas anderes tun. 113 00:09:27,760 --> 00:09:34,860 Bevor Sie also einen Jazz-Exe-Code rendern, ist dies jetzt wichtig, wenn Sie die neueste Version von Expo und React 114 00:09:34,860 --> 00:09:37,110 Native verwenden, die Sie höchstwahrscheinlich sind. 115 00:09:37,140 --> 00:09:43,160 Dies ist kein Verwendungsbildschirm mehr, sondern ein fähiger Bildschirm, den Sie immer noch so nennen. 116 00:09:43,170 --> 00:09:46,140 Es ist nur ein anderer Name und das ist die einzige Änderung, die wir hier 117 00:09:48,970 --> 00:09:50,610 einfach hinter den Kulissen düster machen müssen. 118 00:09:50,650 --> 00:09:56,140 Wenn Sie diese Bildschirme entsperren, werden Sie keinen Unterschied in dieser App sehen, aber es ist 119 00:09:56,260 --> 00:10:00,730 ein bisschen mehr Leistung, daher würde ich dies besonders in größeren Anwendungen empfehlen. 120 00:10:00,760 --> 00:10:03,760 Auch hier sieht man keinen wirklichen Unterschied. 121 00:10:03,940 --> 00:10:06,970 Aber hinter den Kulissen ist dies jetzt etwas effizienter.