Um zu unseren anderen Bildschirmen zu gelangen, benötigen wir etwas, auf das wir klicken und auf das wir tippen können.
Später haben wir hier unser Kategorienraster und werden auch in diesem Modul daran arbeiten. Um jedoch
mit der Navigation zu beginnen, füge ich eine Schaltfläche hinzu. Auf dem Kategorienbildschirm,
auf dem ich diesen Text habe, möchte ich eine hinzufügen Schaltfläche, auf die ich tippen kann, um zum Bildschirm für
die Kategorie Mahlzeiten zu gelangen.
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
wir diese Schaltfläche drücken, möchte ich eine Funktion auslösen, die mich tatsächlich zum Bildschirm "Kategorie
Mahlzeiten" führt.
Jetzt haben wir hier diesen Bildschirm
für Kategorienmahlzeiten eingerichtet, aber wie können wir jetzt dorthin gehen? Aus diesem Grund ist es wichtig zu wissen, dass jede
Komponente, die Sie mithilfe der React-Navigation geladen haben, automatisch eine spezielle Requisite erhält, sodass jede Komponente, die hier einer
Ihrer Bildschirmkennungen zugeordnet ist, in
diesem Fall diese drei Komponenten erhält spezielle Stütze. Verschachtelte Komponenten dort erhalten es nicht automatisch, sondern
nur die Komponenten der obersten Ebene, die Sie Bezeichnern in Ihren Navigatoren zugeordnet haben.
Das ist also eine besondere Requisite, von der ich spreche.
Schauen wir sie uns an.
Also hier in Requisiten können wir es extrahieren und beginnen wir einfach damit, Requisiten für die Konsolenprotokollierung hier zu erstellen, damit
wir eine Idee bekommen und damit wir vorerst keinen Fehler bekommen, werde ich
hier einfach eine leere Funktion an onPress übergeben .
Also lass uns das speichern und sehen, was in Requisiten steckt.
Beim Nachladen haben wir den Button, der nichts macht und hier in der Konsole sehen wir tatsächlich, dass Requisiten
nicht leer sind.
Dies ist
unser Requisitenobjekt und dort haben wir eine Navigationsstütze, die selbst ein Objekt ist,
das einige Aktionen hat, okay, aber das zum Beispiel auch Pop-, Push-, Ersetzungs-, Reset- und Navigationsfunktionen hat, also eine Reihe von Funktionen
die uns helfen, uns in unserer App fortzubewegen.
Es hat auch eine Bildschirm Requisiten Requisite, so dass unsere Requisite Bildschirm Requisiten hat, die wir vorerst ignorieren können.
Das, was in Requisiten und dieser Navigationsstütze steckt, dieser Navigationsteil, der sich dort
befindet,
hilft uns wirklich, also diese Navigationsstütze. Es hilft uns hier, denn wenn wir diese Taste drücken und ich
dies mit einer Inline-Pfeilfunktion hier mache, könnten Sie natürlich eine separate Funktion haben, die Sie erstellen und
die Sie dann onPress zuordnen.
Dies hilft uns und dies kann verwendet werden um herum zu navigieren.
Bei der Requisitennavigation ist die Navigation diese spezielle Requisite, die wir von React Navigation erhalten,
da wir diese Kategorie-Bildschirmkomponente mit Hilfe unseres Navigators hier
geladen haben. Diese spezielle Navigations-Requisite verfügt über eine Navigationsmethode
und dies ist Ihre
Hauptmethode, die wichtigste Methode zur Fortbewegung mit Hilfe der React-Navigation. Wie funktioniert die Navigation?
Navigieren nimmt ein Objekt als Argument und in diesem Objekt können Sie den Routennamen festlegen, zu dem Sie
navigieren möchten.
Sie übergeben also eine Routennameneigenschaft in diesem Objekt, die Sie zum Navigieren übergeben. Nun ist es wichtig,
dass der hier angegebene Routenname einer der drei Routennamen ist, die ich hier eingerichtet habe.
Jetzt sind Routennamen die Bezeichner, die Sie vor diesen Doppelpunkten ausgewählt haben, also die Eigenschaftsnamen in diesem Objekt,
die Sie zum Erstellen des Stapelnavigators übergeben haben.
Dies sind Ihre Routennamen,
mit denen Sie jetzt navigieren können. Hier möchte ich zu Kategoriemahlzeiten gehen. Dies ist
der Routenname, den ich
verwenden möchte. Daher zeige ich hier auf Kategoriemahlzeiten, aber
nicht so. In Javascript würde nach einer Variablen für Kategoriemahlzeiten gesucht, stattdessen nach einer Zeichenfolge mit dem Namen Kategorie Mahlzeiten,
da dies im Grunde Javascript und React Navigation am Ende sagt, dass Sie zu der Route
gehen möchten, die den Namen der Kategorie Mahlzeiten hat und das ist diese Route hier.
So können Sie jetzt dorthin gehen.
Wenn wir dies jetzt speichern und hier auf "Zu den Mahlzeiten gehen" klicken, sehen Sie, dass wir zum Bildschirm "Essen"
gehen. Wir erhalten diese nette Animation sofort. Wir erhalten diese Schaltfläche "Zurück", die
genau so aussieht, wie wir es erwarten würden iOS und all das funktioniert sofort ohne zusätzliche Arbeit,
ohne Überprüfung, ohne manuellen Animationscode. Dank der React-Navigationsbibliothek erhalten wir dies sofort.
Damit können wir zu unserem Essensbildschirm, zum Kategorie-Essensbildschirm und dann zurück zum Kategoriebildschirm zurückkehren
und dies funktioniert auch unter Android. Dort erhalten wir die Android-spezifische Routing-Navigation, die etwas
anders aussieht als unter iOS. Es ist die Navigationsanimation, die Sie unter Android erwarten würden.
Natürlich können Sie auch die Zurück-Taste des Geräts verwenden, um dann zurückzukehren.
Auf diese Weise können Sie zu einem anderen Bildschirm navigieren. Beachten Sie auch, dass die Navigation natürlich
nichts über die Richtung aussagt, in die wir gehen möchten. Sie sagt der React-Navigation nicht, ob diese
Vorwärtsanimation oder diese Rückwärtsanimation abgespielt werden soll . Die Reaktionsnavigation erkennt dies automatisch, da sie unter der
Haube diesen Stapel von Seiten verwaltet, über den ich gesprochen habe, diesen Stapel von Bildschirmen, und in
diesem Stapel haben wir gerade beim Starten der App nur den Kategoriebildschirm, aber wenn ich diese
Taste drücke , navigieren am Ende teilt der React-Navigation mit, dass wir, da wir dies innerhalb einer
Komponente tun, die mit einem Stapelnavigator geladen wurde, zu einem anderen Bildschirm navigieren möchten,
der über den Stapel geschoben werden soll. Dies ist einfach das Standardverhalten und daher weiß es, dass es vorwärts
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
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,
weiß es, dass es die Back-Animation abspielen sollte. Das ist es also, was
sich hinter den Kulissen abspielt. Darüber müssen Sie sich keine Sorgen machen.
Das ist das Gute. Ich möchte nur, dass Sie sich dessen bewusst sind, dass die React-Navigation
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.
Okay, das erlaubt uns, hin und her oder hin und her zu gehen.
Ihre Herausforderung für die nächste Vorlesung, in der wir es dann gemeinsam machen, besteht nun darin, dass Sie dasselbe auch
auf dem Bildschirm für die Kategorie Mahlzeiten tun und sicherstellen, dass wir von dort aus
auch zum MealDetailScreen gehen können. Sollte nicht zu schwer sein, werden wir es in der nächsten Vorlesung gemeinsam tun.