Ich möchte mit der grundlegendsten Form der Navigation und auch der gebräuchlichsten Form der Navigation beginnen, die Sie
in einer mobilen App haben, und so kann man zwischen Bildschirmen hin und her gehen und dafür
einen sogenannten Stack und Navigator einrichten, weil Seiten oder Bildschirme.
Ich werde diese Wörter hier als Synonyme verwenden.
Seiten und Bildschirme werden also grundsätzlich auf einem Stapel von Seiten verwaltet.
Und wenn Sie zu einem neuen Bildschirm wechseln, wird dieser auf den Stapel geschoben. Der oberste Bildschirm eines Stapels
ist immer der Bildschirm, der sichtbar ist.
Und wenn Sie dann auf die Schaltfläche "Zurück" klicken, wird dieser Bildschirm, auf dem Sie sich befanden, ausgeblendet.
Und da Sie in der App immer den obersten Bildschirm sehen, sehen Sie den Bildschirm unter dem Bildschirm, von
dem Sie gekommen sind.
Deshalb heißt es Stack Navigator.
Das ist die Wut.
Verwenden wir es einfach und es wird sehr klar.
Wir haben aus reagieren importiert.
Die Navigation und ihr Name waren der Name der Funktion.
Wir müssen tatsächlich einen solchen Stapelnavigator erstellen, der einen Stapelnavigator erstellt.
Ein wichtiger Hinweis: Diese Syntax ist korrekt, wenn Sie die React Navigation-Version kostenlos verwenden. Wenn Sie die
React Navigation-Abneigung verwenden, die sich geringfügig geändert hat, müssen Sie ein zusätzliches Paket installieren, wie
in einer Vorlesung erwähnt.
Sie müssen npm install dash dash ausführen, den React Dash-Navigations-Dash-Stack speichern und dieses zusätzliche Paket installieren. Wenn es installiert ist, importieren Sie den
Create Stack-Navigator aus React als Navigations-Dash-Stack, anstatt auf die React-Navigation zu reagieren. Dies ist eine geringfügige Anpassung,
die Sie nicht vornehmen müssen Erstellen Sie einen Stack-Navigator. Wenn wir später unsere Navigatoren erstellen,
z. B. den Taps oder Draw Navigator, haben Sie die entsprechenden Pakete, die Sie zum Installieren
von React Navigation Dash Taps usw. benötigen. Dies wird in der Vorlesung behandelt, die
Sie vor dieser Vorlesung finden.
Jetzt habe ich hier diesen Kurs mit der React Navigation Version kostenlos aufgenommen, die sonst genau gleich
ist.
Es ist nur der Import, der sich unterscheidet und deshalb werde ich hier aus der Reaktionsnavigation importieren.
Wenn Sie jedoch Version 4 folgen, reagiert der Bash-Navigations-Dash-Stack auf ein zusätzliches Paket, das
Sie installieren müssen.
So reagiert die Navigation in dieser Bibliothek. Sie erstellen sogenannte Navigatoren, die letztendlich nur sagen
können, dass Objekte tatsächlich auf Komponenten reagieren, da sich herausstellt, welche die gesamte Navigationskonfiguration enthalten, die alle Informationen enthält, welche
verschiedenen Bildschirme Sie haben und welche erledigt das schwere Abheben beim
Laden verschiedener Bildschirme und spielt schöne, reibungslose Übergänge, um für Sie von A
nach B zu gelangen.
Wir müssen also den Create Stack Navigator importieren und können dann einfach aufrufen, dass der Create Stack Navigator mindestens ein
Argument benötigt. Dies ist ein Javascript-Objekt, in dem wir die verschiedenen Bildschirme konfigurieren, zwischen denen wir zwischen
jetzt und dieser gewünschten App wechseln möchten Um auf dem Kategorienbildschirm zu beginnen und wenn ich dort auf
eine Kategorie tippe, möchte ich zum Bildschirm für Kategoriemahlzeiten gehen. Wenn ich dann dort auf ein Rezept
für eine Mahlzeit tippe, möchte ich zum Bildschirm mit den Details zu den Mahlzeiten gehen, damit wir diese benötigen
Drei Bildschirme in unserem Stapelnavigator, sodass Sie zwischen diesen drei Bildschirmen wechseln können, indem Sie dieses Stapelmuster verwenden,
indem Sie Ihre Seiten verschieben und sie entfernen. Warum brauchen wir keine Favoriten und Filter, da Filter später
mithilfe von hinzugefügt werden? Eine Seitenleiste wird hier eine Alternative zu diesem Stapel sein und Favoriten auch als Alternative
zu diesem Stapel werden wir später mit Taps dorthin gehen können, aber momentan nicht.
Beginnen wir also mit dieser grundlegenden stapelbasierten Navigation, bei
der wir zwischen den Kategorien hin- und herwechseln können Sie können beispielsweise Kategorien
auswählen, aber dieser Name liegt bei Ihnen, da eine Eigenschaftskonvention darin besteht, hier
übrigens mit einem Großbuchstaben zu beginnen, aber das müssen
Sie technisch nicht tun.
Sie verwenden also einen beliebigen Bezeichner als Eigenschaftsnamen in diesem Objekt, das Sie
übergeben, um den Stapelnavigator zu erstellen. Der Wert in seiner einfachsten Form ist nun einfach ein Zeiger auf die Reaktionskomponente,
die Sie als Bildschirm für diesen Bildschirm laden möchten.
In meinem Fall wäre dies der Kategorienbildschirm. Alle importieren diesen Bildschirm mit allen Importkategorien aus
dem Bildschirmkategoriebildschirm. Ich kann dies importieren, da dies mein Standardexport ist.
Jetzt ordnen wir diese beiden Kategorien zu und können so später feststellen, dass die von
uns verwendete Bibliotheksnavigation den Kategoriebildschirm laden soll.
Wie gesagt, dies ist nicht der einzige Bildschirm, den ich brauche. Ich möchte auch die Kategorie Mahlzeiten haben.
Dies sind also die Systeme des zweiten Bildschirms. In diesem Bildschirm werden alle Mahlzeiten für die ausgewählte Kategorie angezeigt,
für die wir eine Reihe von Komponenten haben. Dies ist der von uns vorbereitete Bildschirm für die Kategorie Mahlzeiten, den wir
aus dem Bildschirm für die Mahlzeiten der Bildschirme importieren, sodass wir dieses Jahr jetzt nach kartieren So wie ich erwähnt habe, dass dies die einfachste Form der
Zuordnung ist, indem Sie einfach den Eigenschaftsnamen und dann einen Zeiger auf die Komponente haben, die
Sie laden möchten, können Sie das Objekt auch hier übergeben und die Bildschirmeigenschaft für dieses Objekt festlegen und dann auf das at
zeigen die Komponente, die Sie laden möchten.
Warum sollten Sie das tun?
Da Sie jetzt hier neben dem Bildschirm auch eine zusätzliche Konfiguration einrichten können, können Sie einige Standardoptionen für den Bildschirm
usw. einrichten. Dies ist jedoch kein Grund zur Sorge. Wir werden uns später
in diesem Modul darum kümmern Ich möchte nur bereits erwähnen, dass dies die Abkürzung ist.
Dies ist die längere Form, um der Reaktionsnavigation mitzuteilen, welche Bildschirme für welchen Bezeichner geladen werden
sollen. Wir sprechen davon, dass wir natürlich einen dritten Bezeichner benötigen, und das ist der Bezeichner, der unseren
detaillierten Bildschirm laden soll Nennen Sie es Mahlzeitdetail und ich möchte auf meinen Bildschirm mit den detaillierten Mahlzeiten zeigen, damit ich
den Bildschirm mit den Details der Mahlzeiten importiere. Und jetzt gehen wir zum Bildschirmbildschirm und dort ist der Bildschirm mit den detaillierten Mahlzeiten und
ich werde hier wieder die Verknüpfung verwenden.
Wir könnten diese längere Form verwenden, aber ich werde diese Verknüpfung auf dem Bildschirm mit den detaillierten Mahlzeiten verwenden.
Mit dieser Grundkonfiguration sagen wir also, dass die Navigation reagiert.
Hey, das sind die Bildschirme, zwischen denen man sich gerade bewegen kann, aber Daten allein bringen nicht viel.
Warum.
Da wir diesen Stack-Navigator erstellen, aber nichts damit tun, ändern wir diesen Stack-Navigator zum
Erstellen und geben tatsächlich einen Navigationscontainer zurück, der sich als Reaktionskomponente herausstellt.
Es ist alles als Mahlzeiten Navigator benannt.
Klingt nach einem passenden Namen, denn das haben wir am Ende hier.
Und jetzt speichern wir die vom Stack Navigator erstellte Reaktionskomponente, die im Grunde
genommen eine Reaktionskomponente ist, bei der das Laden verschiedener Bildschirme und das Abspielen von Animationen sehr schwer ist.
Diese Reaktionskomponente wird im Mahlzeiten-Navigator gespeichert.
Jetzt könnten wir den Essensnavigator hier exportieren und versuchen, ihn so zu verwenden, und uns erfassen, um ihn auf dem Bildschirm zu
rendern und zu sehen, was passiert, aber tatsächlich zu reagieren, funktioniert die Navigation etwas anders.
Sie müssen auch einen App-Container in diesem App-Container erstellen, den Sie zum Umschließen Ihrer Route benötigen.
Ihr Hauptnavigator in diesem Fall haben wir also nur einen, den wir nur stapeln müssen.
Also lasst uns das damit einpacken.
Lassen Sie uns die Navigation der Mahlzeiten einwickeln oder neu erstellen, indem Sie den App-Container erstellen aufrufen und dann
einfach den Navigator für Mahlzeiten als Argument zum Erstellen eines App-Containers übergeben.
Erstellt auch einen Navigationscontainer.
So erhalten Sie auch eine Reaktionskomponente.
Dies ist jedoch nicht die eigentliche Reaktionskomponente.
Sie sollten in Ihrem ASX-Code verwenden, da dieser nun alle Metadaten zur Navigation im Allgemeinen zur
Reaktionsnavigation usw. enthält.
Dies ist also einfach ein Muster, mit dem Sie Ihre Route, Ihren wichtigsten Navigator, umschließen müssen. Verwenden Sie diese Rücklaufreaktionskomponente
in Ihrem J is X-Code. Dann werden Sie im Grunde genommen die Einstellungen vornehmen, die Sie
immer haben, wenn Sie später mit der Reaktionsnavigation arbeiten Verwendung mehrerer Navigatoren in einer App.
Übrigens haben wir diese und exportieren diese Komponente, die das Ende schafft.
Jetzt können wir in App Chase mit der Verwendung dieser Komponente beginnen.
Haben wir also etwas auf dem Bildschirm dafür gesehen? Gehen wir dorthin und importieren den Essensnavigator aus
dem Navigationsmahlzeitnavigator.
Wie ich bereits erwähnt habe, ist der Navigator für Mahlzeiten nur noch eine Reaktionskomponente. Letztendlich können
wir dies einfach zurückgeben, anstatt unsere Ansicht mit unserem Text hier zurückzugeben.
Ich werde den Navigator für Mahlzeiten zurückgeben und da es sich um eine Reaktionskomponente handelt, kann ich
einfach einen solchen Code von J Isaac mit Dad fahren, wenn wir dies speichern.
Wir sehen uns unsere Anwendung beim Neuladen an
und möglicherweise müssen Sie Ihre App manuell neu laden.
Sie sollten den Kategorienbildschirm nach dem erneuten Laden sehen und dies ist natürlich riesig, da dies bedeutet,
dass dies funktioniert.
Bitte beachten Sie jetzt auch, dass Sie alle standardmäßig einen schönen Header erhalten, der den Standard-Plattform-Look für
E / A hat. Es ist sauber und flach. Diese dünne Linie darunter für Android ist freier dimensioniert, da alles einen
leichten Schlagschatten hat.
Jetzt fehlt natürlich ein Titel und Sie werden lernen, wie wir einen in diesem
Modul hinzufügen können, aber wir bekommen dies sofort und dies berücksichtigt automatisch alle Kerben, die Sie möglicherweise so
weit wie möglich hier haben müssen, damit es automatisch einen solchen verwendet Sicherheitsbereichsansicht und das ist alles, was
ich im letzten Kursmodul erwähnt habe, während Sie über diese Komponente verfügen und diese manchmal benötigen, beispielsweise
wenn Sie eine App mit Reaktionsnavigation erstellen. Die Reaktionsnavigation verpackt Ihre Ansichten bereits in eine Sicherheitsbereichsansicht, zumindest reicht dies aus Ein Großteil
der Arbeit, die Sie sonst erledigen müssten, stellt sicher, dass Ihr Header gut aussieht, und
das ist eine große Sache, da das manuelle Erstellen eines Headers, der auf allen Geräten gut aussieht,
tatsächlich ziemlich viel Arbeit ist.
Das bekommen wir hier.
Die offensichtliche Frage ist nun, wie wir unsere anderen Bildschirme erreichen können.