1 00:00:02,530 --> 00:00:07,540 Um zu unseren anderen Bildschirmen zu gelangen, benötigen wir etwas, auf das wir klicken und auf das wir tippen können. 2 00:00:07,600 --> 00:00:12,130 Später haben wir hier unser Kategorienraster und werden auch in diesem Modul daran arbeiten. Um jedoch 3 00:00:12,220 --> 00:00:15,990 mit der Navigation zu beginnen, füge ich eine Schaltfläche hinzu. Auf dem Kategorienbildschirm, 4 00:00:16,030 --> 00:00:21,850 auf dem ich diesen Text habe, möchte ich eine hinzufügen Schaltfläche, auf die ich tippen kann, um zum Bildschirm für 5 00:00:21,850 --> 00:00:23,510 die Kategorie Mahlzeiten zu gelangen. 6 00:00:23,980 --> 00:00:34,440 Hier füge ich also diese eingebaute Schaltfläche "Native reagieren" hinzu, die integriert ist und einen Titel für "Zu Mahlzeiten gehen" festlegt. Wenn 7 00:00:34,600 --> 00:00:41,630 wir diese Schaltfläche drücken, möchte ich eine Funktion auslösen, die mich tatsächlich zum Bildschirm "Kategorie 8 00:00:41,660 --> 00:00:42,890 Mahlzeiten" führt. 9 00:00:42,890 --> 00:00:45,610 Jetzt haben wir hier diesen Bildschirm 10 00:00:45,620 --> 00:00:53,040 für Kategorienmahlzeiten eingerichtet, aber wie können wir jetzt dorthin gehen? Aus diesem Grund ist es wichtig zu wissen, dass jede 11 00:00:53,040 --> 00:01:00,360 Komponente, die Sie mithilfe der React-Navigation geladen haben, automatisch eine spezielle Requisite erhält, sodass jede Komponente, die hier einer 12 00:01:00,360 --> 00:01:02,550 Ihrer Bildschirmkennungen zugeordnet ist, in 13 00:01:02,550 --> 00:01:09,390 diesem Fall diese drei Komponenten erhält spezielle Stütze. Verschachtelte Komponenten dort erhalten es nicht automatisch, sondern 14 00:01:09,390 --> 00:01:14,850 nur die Komponenten der obersten Ebene, die Sie Bezeichnern in Ihren Navigatoren zugeordnet haben. 15 00:01:14,850 --> 00:01:16,800 Das ist also eine besondere Requisite, von der ich spreche. 16 00:01:16,800 --> 00:01:17,810 Schauen wir sie uns an. 17 00:01:17,820 --> 00:01:23,790 Also hier in Requisiten können wir es extrahieren und beginnen wir einfach damit, Requisiten für die Konsolenprotokollierung hier zu erstellen, damit 18 00:01:23,790 --> 00:01:27,510 wir eine Idee bekommen und damit wir vorerst keinen Fehler bekommen, werde ich 19 00:01:27,510 --> 00:01:30,480 hier einfach eine leere Funktion an onPress übergeben . 20 00:01:30,480 --> 00:01:33,600 Also lass uns das speichern und sehen, was in Requisiten steckt. 21 00:01:33,690 --> 00:01:39,660 Beim Nachladen haben wir den Button, der nichts macht und hier in der Konsole sehen wir tatsächlich, dass Requisiten 22 00:01:39,720 --> 00:01:40,800 nicht leer sind. 23 00:01:40,800 --> 00:01:42,030 Dies ist 24 00:01:42,030 --> 00:01:48,400 unser Requisitenobjekt und dort haben wir eine Navigationsstütze, die selbst ein Objekt ist, 25 00:01:48,420 --> 00:01:58,980 das einige Aktionen hat, okay, aber das zum Beispiel auch Pop-, Push-, Ersetzungs-, Reset- und Navigationsfunktionen hat, also eine Reihe von Funktionen 26 00:01:58,980 --> 00:02:03,090 die uns helfen, uns in unserer App fortzubewegen. 27 00:02:03,450 --> 00:02:09,670 Es hat auch eine Bildschirm Requisiten Requisite, so dass unsere Requisite Bildschirm Requisiten hat, die wir vorerst ignorieren können. 28 00:02:09,690 --> 00:02:17,160 Das, was in Requisiten und dieser Navigationsstütze steckt, dieser Navigationsteil, der sich dort 29 00:02:17,520 --> 00:02:18,680 befindet, 30 00:02:18,690 --> 00:02:25,350 hilft uns wirklich, also diese Navigationsstütze. Es hilft uns hier, denn wenn wir diese Taste drücken und ich 31 00:02:25,370 --> 00:02:30,270 dies mit einer Inline-Pfeilfunktion hier mache, könnten Sie natürlich eine separate Funktion haben, die Sie erstellen und 32 00:02:30,270 --> 00:02:32,010 die Sie dann onPress zuordnen. 33 00:02:32,010 --> 00:02:35,430 Dies hilft uns und dies kann verwendet werden um herum zu navigieren. 34 00:02:35,490 --> 00:02:42,210 Bei der Requisitennavigation ist die Navigation diese spezielle Requisite, die wir von React Navigation erhalten, 35 00:02:42,210 --> 00:02:46,390 da wir diese Kategorie-Bildschirmkomponente mit Hilfe unseres Navigators hier 36 00:02:46,740 --> 00:02:50,900 geladen haben. Diese spezielle Navigations-Requisite verfügt über eine Navigationsmethode 37 00:02:50,910 --> 00:02:53,040 und dies ist Ihre 38 00:02:53,040 --> 00:03:01,620 Hauptmethode, die wichtigste Methode zur Fortbewegung mit Hilfe der React-Navigation. Wie funktioniert die Navigation? 39 00:03:02,490 --> 00:03:12,040 Navigieren nimmt ein Objekt als Argument und in diesem Objekt können Sie den Routennamen festlegen, zu dem Sie 40 00:03:12,040 --> 00:03:13,150 navigieren möchten. 41 00:03:13,240 --> 00:03:19,720 Sie übergeben also eine Routennameneigenschaft in diesem Objekt, die Sie zum Navigieren übergeben. Nun ist es wichtig, 42 00:03:19,720 --> 00:03:25,540 dass der hier angegebene Routenname einer der drei Routennamen ist, die ich hier eingerichtet habe. 43 00:03:25,720 --> 00:03:31,450 Jetzt sind Routennamen die Bezeichner, die Sie vor diesen Doppelpunkten ausgewählt haben, also die Eigenschaftsnamen in diesem Objekt, 44 00:03:31,450 --> 00:03:34,420 die Sie zum Erstellen des Stapelnavigators übergeben haben. 45 00:03:34,420 --> 00:03:36,660 Dies sind Ihre Routennamen, 46 00:03:36,670 --> 00:03:42,900 mit denen Sie jetzt navigieren können. Hier möchte ich zu Kategoriemahlzeiten gehen. Dies ist 47 00:03:42,900 --> 00:03:44,690 der Routenname, den ich 48 00:03:44,690 --> 00:03:48,340 verwenden möchte. Daher zeige ich hier auf Kategoriemahlzeiten, aber 49 00:03:48,410 --> 00:03:56,000 nicht so. In Javascript würde nach einer Variablen für Kategoriemahlzeiten gesucht, stattdessen nach einer Zeichenfolge mit dem Namen Kategorie Mahlzeiten, 50 00:03:56,180 --> 00:04:02,450 da dies im Grunde Javascript und React Navigation am Ende sagt, dass Sie zu der Route 51 00:04:02,450 --> 00:04:08,470 gehen möchten, die den Namen der Kategorie Mahlzeiten hat und das ist diese Route hier. 52 00:04:08,470 --> 00:04:10,720 So können Sie jetzt dorthin gehen. 53 00:04:13,730 --> 00:04:21,530 Wenn wir dies jetzt speichern und hier auf "Zu den Mahlzeiten gehen" klicken, sehen Sie, dass wir zum Bildschirm "Essen" 54 00:04:21,530 --> 00:04:27,020 gehen. Wir erhalten diese nette Animation sofort. Wir erhalten diese Schaltfläche "Zurück", die 55 00:04:27,020 --> 00:04:33,650 genau so aussieht, wie wir es erwarten würden iOS und all das funktioniert sofort ohne zusätzliche Arbeit, 56 00:04:33,650 --> 00:04:38,890 ohne Überprüfung, ohne manuellen Animationscode. Dank der React-Navigationsbibliothek erhalten wir dies sofort. 57 00:04:38,990 --> 00:04:45,800 Damit können wir zu unserem Essensbildschirm, zum Kategorie-Essensbildschirm und dann zurück zum Kategoriebildschirm zurückkehren 58 00:04:45,800 --> 00:04:52,130 und dies funktioniert auch unter Android. Dort erhalten wir die Android-spezifische Routing-Navigation, die etwas 59 00:04:52,400 --> 00:04:57,620 anders aussieht als unter iOS. Es ist die Navigationsanimation, die Sie unter Android erwarten würden. 60 00:04:57,620 --> 00:05:01,550 Natürlich können Sie auch die Zurück-Taste des Geräts verwenden, um dann zurückzukehren. 61 00:05:01,550 --> 00:05:08,600 Auf diese Weise können Sie zu einem anderen Bildschirm navigieren. Beachten Sie auch, dass die Navigation natürlich 62 00:05:08,600 --> 00:05:15,530 nichts über die Richtung aussagt, in die wir gehen möchten. Sie sagt der React-Navigation nicht, ob diese 63 00:05:15,530 --> 00:05:22,490 Vorwärtsanimation oder diese Rückwärtsanimation abgespielt werden soll . Die Reaktionsnavigation erkennt dies automatisch, da sie unter der 64 00:05:22,550 --> 00:05:29,120 Haube diesen Stapel von Seiten verwaltet, über den ich gesprochen habe, diesen Stapel von Bildschirmen, und in 65 00:05:29,120 --> 00:05:35,060 diesem Stapel haben wir gerade beim Starten der App nur den Kategoriebildschirm, aber wenn ich diese 66 00:05:35,420 --> 00:05:42,050 Taste drücke , navigieren am Ende teilt der React-Navigation mit, dass wir, da wir dies innerhalb einer 67 00:05:42,050 --> 00:05:47,570 Komponente tun, die mit einem Stapelnavigator geladen wurde, zu einem anderen Bildschirm navigieren möchten, 68 00:05:47,600 --> 00:05:53,810 der über den Stapel geschoben werden soll. Dies ist einfach das Standardverhalten und daher weiß es, dass es vorwärts 69 00:05:53,840 --> 00:05:59,690 gehen möchte, weil eine neue Route verschoben wurde, was bedeutet, dass sie dem Stapel hinzugefügt wurde. Wir möchten vorwärts gehen und wenn 70 00:05:59,690 --> 00:06:06,080 wir auf die Schaltfläche Zurück klicken, die es automatisch hinzufügt, wird es Popup dieses Bildschirms vom Stapel und da es etwas vom Stapel entfernt, 71 00:06:06,170 --> 00:06:10,700 weiß es, dass es die Back-Animation abspielen sollte. Das ist es also, was 72 00:06:10,700 --> 00:06:14,870 sich hinter den Kulissen abspielt. Darüber müssen Sie sich keine Sorgen machen. 73 00:06:14,960 --> 00:06:20,330 Das ist das Gute. Ich möchte nur, dass Sie sich dessen bewusst sind, dass die React-Navigation 74 00:06:20,330 --> 00:06:27,980 das schwere Heben für Sie erledigt und diesen Stapel verwaltet Bildschirm und die entsprechenden Animationen benötigen Sie daher unter der Haube für Sie. 75 00:06:28,120 --> 00:06:32,990 Okay, das erlaubt uns, hin und her oder hin und her zu gehen. 76 00:06:32,990 --> 00:06:39,260 Ihre Herausforderung für die nächste Vorlesung, in der wir es dann gemeinsam machen, besteht nun darin, dass Sie dasselbe auch 77 00:06:39,260 --> 00:06:44,270 auf dem Bildschirm für die Kategorie Mahlzeiten tun und sicherstellen, dass wir von dort aus 78 00:06:44,270 --> 00:06:47,990 auch zum MealDetailScreen gehen können. Sollte nicht zu schwer sein, werden wir es in der nächsten Vorlesung gemeinsam tun.