Fügen wir also dieses letzte Hauptnavigationsmuster hinzu, das Sie in mobilen Apps sehen, und das hat natürlich eine Seitentür,
die auch für Dad abgedeckt ist. Aus der Reaktionsnavigation können Sie Draw Draw und Navigator importieren, die
genau das tun, wonach es sich anhört.
Es macht es uns einfach, dieses zeichnungsbasierte Navigationsmuster zu erstellen, und es gibt uns eine solche
Zeichnung und alle Funktionen, die wir benötigen, um den Strohhalm sofort zu kontrollieren, was natürlich sehr praktisch ist.
Also erstellen wir einfach einen neuen Navigator und ich mache das am Ende dieser Datei.
Und nur eine kurze Randnotiz: Sie können das natürlich in mehrere Dateien aufteilen und jeden Navigator in
einer eigenen Datei haben und sie dann zu einer Datei zusammenführen, indem Sie sie in eine zentrale Datei importieren.
Das können Sie tun.
Ich fand es für dieses Tutorial einfacher, alles in einer Datei zu speichern.
Allzu viel zu groß für eine Datei, aber Sie könnten dies definitiv teilen.
Also werde ich meinen Zeichnungsnavigator hier am Ende dieser Datei erstellen und alles in dieser Konstante mit dem Namen Hauptnavigator
speichern, denn am Ende ist es das, was es ist.
Dies wird am Ende unser Hauptnavigator sein, da sich die Registerkarte innerhalb der Auslosung befindet und der Navigator am
Ende unsere Ereignisse hier.
Also auf beiden Registerkarten.
Wir haben Zugriff auf dieses Side Draw und entscheiden, dass Draw es uns ermöglicht, zu einem brandneuen Bildschirm zu wechseln, der nicht
Teil unserer Taps ist.
Der Zeichnungsnavigator befindet sich also über dem Registerkartennavigator in der Hierarchie.
Wie konfigurieren wir einen solchen Zeichnungsnavigator?
Grundsätzlich sind genau so, wie wir es zuvor getan haben, zwei Argumente erforderlich.
Das erste Argument ist ein Objekt, bei dem wir die Bildschirme für die Gerechtigkeit des
Zerstörernavigators konfigurieren, bevor wir Kennungen wie Wasserhähne oder Essensfavoriten haben, unabhängig davon, welcher Navigator für den ersten Schubladeneintrag geeignet ist, den Sie
haben möchten.
Und hier möchte ich noch auf meinen Vater-Tab-Navigator für Mahlzeiten verweisen, da ich diesen dort laden möchte und bei
einem zweiten Eintrag der Filterbildschirm nicht vergessen darf, dass wir einen anderen Bildschirm haben, der der Filterbildschirm ist, den wir nicht verwendet
haben es vorher jetzt, da es Zeit ist zu glänzen und tatsächlich alles wie in einen Stapelnavigator
eingewickelt, obwohl es leer sein wird.
Also haben wir dort auch einen Header bekommen.
Daher werde ich hier mit create stack navigator einen weiteren Stack-Navigator hinzufügen.
Das ist ein sehr einfacher Stapel.
Es wird nur einen Bildschirm haben und das wird der Filterbildschirm sein, der daher hier oben
importiert werden müsste, weil wir das noch nicht tun.
Lassen Sie uns den Filterbildschirm hier vom Bildschirmfilterbildschirm importieren und jetzt können wir den Filterbildschirm auf ihrer Website verwenden, nicht
hier, sondern hier im Stapelnavigator. Der Name lautet Filternavigator. Lesen Sie so etwas, und jetzt ist es dieser Filternavigator,
der Filtern zugeordnet werden kann Mein Schubladen-Navigator und ich verwenden hier nur einen Stapel-Navigator,
daher haben sie dort auch einen Header, und aus keinem anderen
Grund wird der Filterbildschirm jetzt in einer Sekunde daran
arbeiten, aber dort möchte ich eines sofort tun Ich füge meine Navigationsoptionen hinzu und füge dort einen Header-Titel
hinzu und setze diesen auf Filter oder Filtermahlzeiten, so dass dies zurück zum Mahlzeiten-Navigator erfolgt. Wir erstellen diesen Stapel. Wir
weisen den Filter-Navigator-Stapel-Navigator unserem Zeichnungsnavigator zu und jetzt müssen wir nur noch den
Hauptnavigator hier in unserem App-Container verwenden, um mit Schulden zu beginnen, und jetzt, wenn wir dies speichern, sehen wir jedoch
nichts.
Nun, ich sagte, dass der Zeichnungsnavigator die gesamte Logik für das Öffnen
verwalten würde. Das endet damit, dass er nicht automatisch ein Menüsymbol anzeigt, sodass für uns kein Hamburger-Button angezeigt wird.
Das müssen wir tun und wir können entscheiden, auf welchen Bildschirmen es angezeigt werden soll.
Und das wäre natürlich der Kategoriebildschirm, da dies der Stammbildschirm für die Registerkarte "Mahlzeiten"
und der Favoritenbildschirm ist, da dies der Stammbildschirm für die Registerkarte "Favoriten" ist.
In diesen beiden Bildschirmen möchte ich dieses Menüsymbol hinzufügen und es in meine Navigationsoptionen einfügen, wie Sie gelernt
haben, da ich es dort mithilfe der linken Kopfzeile hinzufügen möchte.
Früher hatten wir das Recht, der Navigationsleiste der Kopfzeile Aktionen hinzuzufügen, aber diese Menüschaltfläche befindet sich normalerweise
links, um hier hinzugefügt zu werden.
Und ich werde dafür meine Header-Buttons verwenden.
Also werden wir aus den React-Navigations-Header-Schaltflächen importieren.
Dieses Paket, das wir zuvor von dort aus verwendet haben, importiere ich Header-Schaltflächen und stelle auch fest, was wir alle zuvor verwendet
haben, und importiere auch meine benutzerdefinierte Header-Schaltfläche.
Also Header-Button von Komponenten-Header-Button, also das gleiche Muster, das wir zuvor für das Hinzufügen dieses Sterns verwendet haben, kann
ich in der Tat Aktionsleiste.
Jetzt mache ich es hier für das Menüsymbol für die Menüschaltfläche
und daher können wir jetzt nach links gehen und ihre Anzeigenkopfschaltflächen in diesem Jahr als Komponente die Kopfzeilenschaltflächenkomponente auf unsere Kopfzeilenschaltflächenkomponente setzen.
Wir importieren aus unserer eigenen benutzerdefinierten Komponente und fügen dort ein Element hinzu, mit dem wir
den Titel definieren können, der Menü sein soll, und dann kann ich sehr wichtig benennen.
Und dort können Sie das IOW-Menü verwenden.
Übrigens können Sie hier jederzeit die Plattform-API verwenden, um ein anderes Symbol für Android und
ISIS zu verwenden, wenn Sie möchten.
Und zu guter Letzt drücken alle Add-Ons, um etwas zu tun, wenn tote Tasten gedrückt werden.
Und jetzt sollte dies eine gut aussehende Menüschaltfläche hier auf diesem Bildschirm darstellen, und tatsächlich sehen wir sie hier
auf uns.
Und wir sehen es auch auf Android.
Nun noch einmal, wenn Sie ein anderes Symbol auf Android möchten, das eher wie ein typisches Android-Symbol aussieht.
Das Gleiche gilt für die Taps, da Sie mithilfe der Plattform-API ein anderes Symbol rendern
können, um Zeit zu sparen. Ich verwende dieselben Symbole.
So zeigen wir das Symbol an.
Wie können wir jetzt eine Auslosung eröffnen, obwohl wir dafür Zugriff auf die Navigationsstütze benötigen und diesen
Zugriff in den Navigationsoptionen wie diesen nicht haben.
Aber natürlich haben wir früher gelernt, dass Sie das Funktionsformular hier verwenden können, wo Sie dann Ihre Navigationsdaten
erhalten.
Sie könnten in dieser Funktion sagen, dass Sie dann Ihr Konfigurationsobjekt zurückgeben müssen.
Hier müssen Sie also am Ende ein Objekt zurückgeben.
Und jetzt hat nav data eine solche Navigationsstütze.
Jetzt hier in der Presse können wir sagen, dass Nav-Daten Punktnavigation Dad jetzt verfügbar sein wird, die durch
die Reaktionsnavigation bereitgestellt wird, die diese Funktion am Ende ausführt.
Und dort haben Sie eine Umschalt-Zeichenmethode.
Sie würden auch Open Draw haben, wenn Sie wissen, dass Sie es nur öffnen möchten, aber Toggle Draw öffnet es, wenn es geschlossen
ist, und schließt es, wenn es geöffnet ist.
Also hier müssen Sie Draw umschalten und Dash sollte das Seitenmenü öffnen.
Wenn wir also speichern, dass sich die Schublade jetzt tatsächlich öffnet, können wir in einer Sekunde an dem Stil
und dem Text arbeiten, den wir hier sehen. Auf diese Weise können Sie diese Schublade jetzt öffnen, bevor wir uns darum kümmern, wie dies hier aussieht.
Stellen wir sicher, dass wir einen Favoriten sagen müssen.
Und natürlich können Sie alle hier ein Video hinterlegen und es selbst machen, da die
Schritte dieselben sind wie für die Essenskategorien hier.
Es ist eine schöne Übung, aber nach dieser kurzen Pause müssen Sie dieses Video weitergeben. Wir
machen es zusammen, also waren Sie erfolgreich.
Lassen Sie es uns gemeinsam tun und am Ende geht es nur darum, dieses Setup hier zu kopieren. 2D-Favoritenbildschirm,
also kopiere ich das gesamte Setup der Navigationsoptionen vom Kategorienbildschirm auf den Favoritenbildschirm und ersetze
meine Navigationsoptionssteuerung damit natürlich, was bedeutet, dass ich Ich muss uns
hier in den Favoritenbildschirm umbenennen und hier den Titel wieder in Ihre Favoriten ändern, aber jetzt
habe ich bereits diese Funktion zur Erstellung dynamischer Navigationsoptionen hier, bei der ich den Zeichnungsaufruf hier
umschalten muss Sicher, wir importieren alle Dinge, die wir importieren müssen, und für Dad
können wir die Importe hier sowohl vom Kategorienbildschirm als auch vom Paket "React Navigation Had" oder "Buttons" abrufen.
Und von unserer eigenen Kopfzeile.
Schnapp dir das und füge es hier auf dem Lieblingsbildschirm mit Dad hinzu, wenn wir es gespeichert haben, da dies alles jetzt
auf dem Lieblingsbildschirm sein sollte, den wir auch zeichnen müssen, und du kannst es auch dort öffnen.
Wir können es nicht einfach so öffnen, wenn wir auf klicken Filterrolle für den
Filterbildschirm dort haben wir gerade keinen Weg zurück, aber das ist eigentlich etwas, das wir alle
sofort beheben können, weil der Filterbildschirm ich einfach auch nur ein Draw oben haben möchte, also auf dem Filterbildschirm Ich werde hier auch meine Importe hinzufügen. Die Kopfzeilen von
Whip enden und dann alle Optionen zum Hinzufügen nach Navigation hier.
Kopieren Sie also die Navigationsoptionen aus dem Lieblingsbildschirm dieser dynamischen Funktion und fügen Sie sie dem Filterbildschirm hinzu
und ersetzen Sie die Navigationsoptionstreppe natürlich. Ändern Sie sie dann dieses Jahr wieder in den Filterbildschirm und
ändern Sie sie in den Titel zurück, um die Mahlzeiten zu filtern oder was auch immer Sie hier und wollen Damit sollten wir
auch einen Draw auf dem Filterbildschirm haben und das erlaubt uns, zu unseren Mahlzeiten zurückzukehren, jetzt fehlen jedoch ein
paar Dinge.
Zum Beispiel auf dem Filterbildschirm sieht die Kopfzeile völlig anders aus und deshalb kann ich
hier auf Android meine Schaltfläche nicht einmal sehen, weil sie weiß ist. Der Text hier ist nicht der
Text, den ich anzeigen möchte. Ich möchte hier auch verschiedene Farben verwenden, vielleicht eine andere Schriftart Es bleibt noch viel zu tun, aber die grundlegende Zeichenfunktion
wurde hinzugefügt, und wie Sie wieder sehen, mit sehr geringem Aufwand.
Lassen Sie uns nun die Gestaltung der Zeichnung und des Filters des Bildschirms berücksichtigen.