1 00:00:02,250 --> 00:00:07,650 Wir extrahieren unsere Kategorie hier in unserer Komponente, weil wir dort unsere Parameter mithilfe 2 00:00:07,650 --> 00:00:09,130 von Navigationsrequisiten abrufen. 3 00:00:09,150 --> 00:00:12,980 Jetzt möchte ich den Titel allerdings in meinem Header ausgeben. 4 00:00:13,050 --> 00:00:18,520 Jetzt haben Sie gelernt, wie Sie diesen Header mithilfe der Navigationsoptionen konfigurieren können. In 5 00:00:18,630 --> 00:00:25,170 der Kategorie Mahlzeit Mahlzeit Bildschirmkomponente und daher ist dies eine Funktion, dies ist ein Objekt, wir können 6 00:00:25,530 --> 00:00:30,300 Navigationsoptionen hinzufügen und Sie haben gelernt, dass dies eine ist Javascript-Objekt, 7 00:00:30,300 --> 00:00:35,670 in dem Sie einen Header-Titel und einen Header-Titel einrichten können, sollte mein Kategoriename sein. 8 00:00:35,700 --> 00:00:43,910 Das Problem hierbei ist, dass hier eine ausgewählte Kategorie verfügbar ist, die sich jedoch innerhalb der Komponentenfunktion befindet. 9 00:00:43,910 --> 00:00:49,670 Darauf können wir hier natürlich nicht zugreifen, da dies nach der 10 00:00:49,670 --> 00:00:50,990 Funktionsdefinition geschieht. 11 00:00:51,350 --> 00:00:55,150 Wir haben also keinen Zugriff auf die Kategorie, die wir dort identifiziert 12 00:00:55,220 --> 00:00:56,920 haben. Das ist ein Problem. 13 00:00:56,930 --> 00:01:04,390 Das Gute ist, dass Navigationsoptionen ein Objekt sein können, wenn Sie statische fest codierte Konfigurationswerte haben, aber es kann auch eine 14 00:01:05,000 --> 00:01:11,990 Funktion sein, wenn Sie eine dynamische Konfiguration benötigen, die von sich ändernden Daten abhängt, und natürlich ändern sich die Daten, 15 00:01:12,020 --> 00:01:17,300 von denen wir hier abhängen, weil wir ' Wenn Sie ein und denselben Bildschirm 16 00:01:17,300 --> 00:01:22,820 für verschiedene Kategorien verwenden, ändern sich die ID und der Titel der Kategorie jedes Mal, wenn 17 00:01:22,820 --> 00:01:26,140 wir diesen Bildschirm verwenden. Einmal verwenden wir es für 18 00:01:26,140 --> 00:01:32,360 die italienische Kategorie, das nächste Mal für die exotische Kategorie. Diese Funktion, die Sie auch verwenden können, wird 19 00:01:32,360 --> 00:01:34,700 natürlich von der React-Navigation unterstützt. 20 00:01:34,700 --> 00:01:40,220 Wenn dies eine Funktion ist, die Sie an die Navigationsoptionen übergeben, ruft die 21 00:01:40,220 --> 00:01:48,740 React-Navigation sie für Sie auf und übergibt einige Navigationsdaten Wenn Sie ein Objekt mit einigen Daten übergeben, die Ihnen helfen sollen, 22 00:01:48,740 --> 00:01:54,800 sehen wir uns gleich an, was sich dort befindet, da wir diese Navigationsdaten hier einfach 23 00:01:54,800 --> 00:01:55,850 protokollieren können. 24 00:01:55,970 --> 00:01:57,610 Beginnen wir damit, gehen 25 00:01:57,710 --> 00:02:01,210 wir jetzt zu dieser Seite und sehen, was da drin ist. 26 00:02:01,310 --> 00:02:05,850 Wenn ich dies hier erweitere, ist dies das Protokoll, das ich erhalten habe, 27 00:02:05,850 --> 00:02:14,570 und Sie sehen, wir haben eine weitere Navigationsstütze in den Navigationsdaten. Dort haben wir Aktionen, wir haben Pop navigiert, Push, also 28 00:02:14,580 --> 00:02:15,390 im 29 00:02:15,390 --> 00:02:20,010 Grunde das, was wir wussten. Wir haben dort auch 30 00:02:20,010 --> 00:02:28,050 getParam und das sollte nützlich sein, da wir so am Ende Daten hier innerhalb unserer 31 00:02:28,110 --> 00:02:36,880 Navigationsoptionen extrahieren können, was sehr hilfreich sein sollte. Am Ende erhalten wir also die gleiche Navigationsstütze, die wir auch für unsere Komponentenstützen erhalten. 32 00:02:37,040 --> 00:02:48,110 Hier können wir also jetzt navigationData verwenden. Navigation. getParam, um meine Kategorie-ID zu erhalten, genau das, 33 00:02:48,110 --> 00:02:54,660 was wir in der Komponente getan haben. So können wir den Code, den wir in einer Komponente 34 00:02:54,660 --> 00:03:02,020 hatten, wiederholen und die ausgewählte Kategorie erhalten, nicht nur in der Komponente, sondern jetzt auch in dieser Funktion, mit der wir unsere Navigationsoptionen einrichten. 35 00:03:02,040 --> 00:03:08,130 Jetzt erhalten wir hier auch Zugriff auf die ausgewählte Kategorie und jetzt, Navigationsoptionen, sollte diese Funktion, wenn 36 00:03:08,220 --> 00:03:13,460 es sich um eine Funktion handelt, natürlich ein Objekt mit Ihren Navigationsoptionen zurückgeben. 37 00:03:13,470 --> 00:03:19,860 Was wir zuvor direkt als Navigationsoptionen festgelegt hatten, als wir nur fest codierte Werte hatten, muss 38 00:03:19,860 --> 00:03:20,550 jetzt 39 00:03:20,610 --> 00:03:26,950 zurückgegeben werden, kann jetzt aber diese dynamisch abgeleiteten Daten oder die dynamisch abgeleiteten Informationen hier verwenden. 40 00:03:26,970 --> 00:03:33,600 Jetzt können wir hier noch einen Header-Titel einrichten und der Header-Titel kann nun als Kategorie ausgewählt 41 00:03:33,720 --> 00:03:35,450 werden. Titel. 42 00:03:35,510 --> 00:03:41,300 Auf diese Weise können wir dies dynamisch ableiten. Wenn Sie also zurückgehen, sehen Sie 43 00:03:41,300 --> 00:03:47,420 hier Italienisch, hier sehen Sie schnell und einfach, hier sehen Sie Deutsch, und das funktioniert einfach. 44 00:03:47,420 --> 00:03:55,280 Bitte beachten Sie, dass Sie standardmäßig auch einen Zurück-Schaltflächentext erhalten, der dem Titel des vorherigen Bildschirms entspricht. Dies ist eine 45 00:03:55,280 --> 00:04:01,130 weitere Standardfunktion, die Ihnen die React-Navigation bietet. Wir sehen hier wieder die Essenskategorien, weil 46 00:04:01,130 --> 00:04:05,720 wir aus den Essenskategorien kommen. Nur auf schnell und einfach, wo 47 00:04:05,720 --> 00:04:13,010 dies neben diesem etwas längeren Titel zu lang wäre, wird zurückgesetzt und standardmäßig zurückgesetzt. Dies ist ein gutes Standardverhalten, das Sie 48 00:04:13,010 --> 00:04:19,400 überschreiben könnten, mit dem ich hier jedoch zufrieden bin. Unter Android haben wir keinen Zurück-Text, aber natürlich 49 00:04:19,400 --> 00:04:25,340 haben wir eine Zurück-Schaltfläche, und dort wird die Kopfzeile auch für die geladenen Bildschirme korrekt ausgefüllt. 50 00:04:26,240 --> 00:04:32,030 So können wir unsere Daten auch hier in den Navigationsoptionen dynamisch abrufen. Ein Problem, das Sie hier möglicherweise am 51 00:04:32,030 --> 00:04:37,430 meisten bemerken, ist, dass der Header auf dem neuen Bildschirm, den wir laden, nicht das gleiche 52 00:04:37,700 --> 00:04:44,450 Design wie unser Header hier hat, sondern nicht die Hintergrundfarbe. Das lässt sich natürlich leicht beheben, da wir 53 00:04:44,480 --> 00:04:51,620 in den Navigationsoptionen der Kategorie Mahlzeiten einfach den Header-Stil und die Header-Tönungsfarbe einfügen können, die wir hier 54 00:04:51,620 --> 00:04:58,250 auch auf dem anderen Bildschirm eingerichtet haben. Wir können das hier kopieren und das 55 00:04:58,250 --> 00:05:06,200 bedeutet nur, dass wir die Plattform-API und natürlich unsere konstante Farbe importieren müssen. Importieren Sie also Farben aus 56 00:05:06,550 --> 00:05:18,730 Konstanten / Farben wie diesen, und wenn wir das tun, werden wir das sehen, wenn wir dorthin gehen Wir haben jetzt den gleichen Header-Stil für diese neue Seite, 57 00:05:18,730 --> 00:05:25,570 was natürlich das ist, was Sie normalerweise wollen. Was Sie jedoch normalerweise nicht möchten, ist, dass Sie 58 00:05:25,600 --> 00:05:31,300 dieselbe Konfiguration auf jeden Bildschirm kopieren müssen, da wir in dieser App nicht so viele Bildschirme 59 00:05:31,300 --> 00:05:36,070 haben, das können wir sicherlich, aber in größeren Apps, in denen Sie mehr 60 00:05:36,070 --> 00:05:42,520 Bildschirme haben, das wäre super nervig und super umständlich, also ist es definitiv nicht der richtige Weg dorthin. 61 00:05:42,520 --> 00:05:44,740 Schauen wir uns also in der nächsten Vorlesung eine Alternative an.