1 00:00:02,940 --> 00:00:09,450 Fügen wir also dieses letzte Hauptnavigationsmuster hinzu, das Sie in mobilen Apps sehen, und das hat natürlich eine Seitentür, 2 00:00:10,170 --> 00:00:16,000 die auch für Dad abgedeckt ist. Aus der Reaktionsnavigation können Sie Draw Draw und Navigator importieren, die 3 00:00:16,000 --> 00:00:18,740 genau das tun, wonach es sich anhört. 4 00:00:18,750 --> 00:00:24,690 Es macht es uns einfach, dieses zeichnungsbasierte Navigationsmuster zu erstellen, und es gibt uns eine solche 5 00:00:24,750 --> 00:00:30,870 Zeichnung und alle Funktionen, die wir benötigen, um den Strohhalm sofort zu kontrollieren, was natürlich sehr praktisch ist. 6 00:00:30,930 --> 00:00:35,060 Also erstellen wir einfach einen neuen Navigator und ich mache das am Ende dieser Datei. 7 00:00:35,490 --> 00:00:40,860 Und nur eine kurze Randnotiz: Sie können das natürlich in mehrere Dateien aufteilen und jeden Navigator in 8 00:00:40,890 --> 00:00:46,550 einer eigenen Datei haben und sie dann zu einer Datei zusammenführen, indem Sie sie in eine zentrale Datei importieren. 9 00:00:46,560 --> 00:00:48,120 Das können Sie tun. 10 00:00:48,120 --> 00:00:51,430 Ich fand es für dieses Tutorial einfacher, alles in einer Datei zu speichern. 11 00:00:51,560 --> 00:00:56,070 Allzu viel zu groß für eine Datei, aber Sie könnten dies definitiv teilen. 12 00:00:56,340 --> 00:01:01,410 Also werde ich meinen Zeichnungsnavigator hier am Ende dieser Datei erstellen und alles in dieser Konstante mit dem Namen Hauptnavigator 13 00:01:01,770 --> 00:01:04,380 speichern, denn am Ende ist es das, was es ist. 14 00:01:04,380 --> 00:01:10,470 Dies wird am Ende unser Hauptnavigator sein, da sich die Registerkarte innerhalb der Auslosung befindet und der Navigator am 15 00:01:10,470 --> 00:01:11,880 Ende unsere Ereignisse hier. 16 00:01:11,970 --> 00:01:13,190 Also auf beiden Registerkarten. 17 00:01:13,200 --> 00:01:19,530 Wir haben Zugriff auf dieses Side Draw und entscheiden, dass Draw es uns ermöglicht, zu einem brandneuen Bildschirm zu wechseln, der nicht 18 00:01:19,530 --> 00:01:20,880 Teil unserer Taps ist. 19 00:01:20,910 --> 00:01:25,890 Der Zeichnungsnavigator befindet sich also über dem Registerkartennavigator in der Hierarchie. 20 00:01:26,130 --> 00:01:28,680 Wie konfigurieren wir einen solchen Zeichnungsnavigator? 21 00:01:28,830 --> 00:01:32,070 Grundsätzlich sind genau so, wie wir es zuvor getan haben, zwei Argumente erforderlich. 22 00:01:32,070 --> 00:01:37,950 Das erste Argument ist ein Objekt, bei dem wir die Bildschirme für die Gerechtigkeit des 23 00:01:37,950 --> 00:01:46,350 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 24 00:01:46,350 --> 00:01:47,570 haben möchten. 25 00:01:47,850 --> 00:01:54,780 Und hier möchte ich noch auf meinen Vater-Tab-Navigator für Mahlzeiten verweisen, da ich diesen dort laden möchte und bei 26 00:01:54,780 --> 00:02:02,460 einem zweiten Eintrag der Filterbildschirm nicht vergessen darf, dass wir einen anderen Bildschirm haben, der der Filterbildschirm ist, den wir nicht verwendet 27 00:02:02,460 --> 00:02:08,550 haben es vorher jetzt, da es Zeit ist zu glänzen und tatsächlich alles wie in einen Stapelnavigator 28 00:02:08,550 --> 00:02:11,130 eingewickelt, obwohl es leer sein wird. 29 00:02:11,130 --> 00:02:13,850 Also haben wir dort auch einen Header bekommen. 30 00:02:14,130 --> 00:02:20,370 Daher werde ich hier mit create stack navigator einen weiteren Stack-Navigator hinzufügen. 31 00:02:20,370 --> 00:02:22,130 Das ist ein sehr einfacher Stapel. 32 00:02:22,290 --> 00:02:26,670 Es wird nur einen Bildschirm haben und das wird der Filterbildschirm sein, der daher hier oben 33 00:02:26,670 --> 00:02:29,190 importiert werden müsste, weil wir das noch nicht tun. 34 00:02:29,340 --> 00:02:38,670 Lassen Sie uns den Filterbildschirm hier vom Bildschirmfilterbildschirm importieren und jetzt können wir den Filterbildschirm auf ihrer Website verwenden, nicht 35 00:02:38,720 --> 00:02:47,600 hier, sondern hier im Stapelnavigator. Der Name lautet Filternavigator. Lesen Sie so etwas, und jetzt ist es dieser Filternavigator, 36 00:02:47,600 --> 00:02:54,450 der Filtern zugeordnet werden kann Mein Schubladen-Navigator und ich verwenden hier nur einen Stapel-Navigator, 37 00:02:54,450 --> 00:02:59,790 daher haben sie dort auch einen Header, und aus keinem anderen 38 00:02:59,790 --> 00:03:04,260 Grund wird der Filterbildschirm jetzt in einer Sekunde daran 39 00:03:04,260 --> 00:03:12,810 arbeiten, aber dort möchte ich eines sofort tun Ich füge meine Navigationsoptionen hinzu und füge dort einen Header-Titel 40 00:03:15,280 --> 00:03:24,840 hinzu und setze diesen auf Filter oder Filtermahlzeiten, so dass dies zurück zum Mahlzeiten-Navigator erfolgt. Wir erstellen diesen Stapel. Wir 41 00:03:24,840 --> 00:03:31,050 weisen den Filter-Navigator-Stapel-Navigator unserem Zeichnungsnavigator zu und jetzt müssen wir nur noch den 42 00:03:31,050 --> 00:03:40,270 Hauptnavigator hier in unserem App-Container verwenden, um mit Schulden zu beginnen, und jetzt, wenn wir dies speichern, sehen wir jedoch 43 00:03:40,270 --> 00:03:41,350 nichts. 44 00:03:41,350 --> 00:03:47,380 Nun, ich sagte, dass der Zeichnungsnavigator die gesamte Logik für das Öffnen 45 00:03:47,380 --> 00:03:56,020 verwalten würde. Das endet damit, dass er nicht automatisch ein Menüsymbol anzeigt, sodass für uns kein Hamburger-Button angezeigt wird. 46 00:03:56,020 --> 00:03:59,710 Das müssen wir tun und wir können entscheiden, auf welchen Bildschirmen es angezeigt werden soll. 47 00:03:59,710 --> 00:04:04,600 Und das wäre natürlich der Kategoriebildschirm, da dies der Stammbildschirm für die Registerkarte "Mahlzeiten" 48 00:04:04,600 --> 00:04:09,320 und der Favoritenbildschirm ist, da dies der Stammbildschirm für die Registerkarte "Favoriten" ist. 49 00:04:09,340 --> 00:04:15,880 In diesen beiden Bildschirmen möchte ich dieses Menüsymbol hinzufügen und es in meine Navigationsoptionen einfügen, wie Sie gelernt 50 00:04:15,910 --> 00:04:20,390 haben, da ich es dort mithilfe der linken Kopfzeile hinzufügen möchte. 51 00:04:20,410 --> 00:04:26,620 Früher hatten wir das Recht, der Navigationsleiste der Kopfzeile Aktionen hinzuzufügen, aber diese Menüschaltfläche befindet sich normalerweise 52 00:04:26,620 --> 00:04:29,070 links, um hier hinzugefügt zu werden. 53 00:04:29,350 --> 00:04:32,810 Und ich werde dafür meine Header-Buttons verwenden. 54 00:04:32,920 --> 00:04:37,480 Also werden wir aus den React-Navigations-Header-Schaltflächen importieren. 55 00:04:37,480 --> 00:04:44,970 Dieses Paket, das wir zuvor von dort aus verwendet haben, importiere ich Header-Schaltflächen und stelle auch fest, was wir alle zuvor verwendet 56 00:04:47,490 --> 00:04:50,280 haben, und importiere auch meine benutzerdefinierte Header-Schaltfläche. 57 00:04:50,280 --> 00:04:57,660 Also Header-Button von Komponenten-Header-Button, also das gleiche Muster, das wir zuvor für das Hinzufügen dieses Sterns verwendet haben, kann 58 00:04:57,690 --> 00:04:59,730 ich in der Tat Aktionsleiste. 59 00:04:59,730 --> 00:05:06,330 Jetzt mache ich es hier für das Menüsymbol für die Menüschaltfläche 60 00:05:06,360 --> 00:05:18,500 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. 61 00:05:18,510 --> 00:05:23,610 Wir importieren aus unserer eigenen benutzerdefinierten Komponente und fügen dort ein Element hinzu, mit dem wir 62 00:05:23,610 --> 00:05:28,420 den Titel definieren können, der Menü sein soll, und dann kann ich sehr wichtig benennen. 63 00:05:28,560 --> 00:05:31,560 Und dort können Sie das IOW-Menü verwenden. 64 00:05:31,560 --> 00:05:36,570 Übrigens können Sie hier jederzeit die Plattform-API verwenden, um ein anderes Symbol für Android und 65 00:05:36,570 --> 00:05:38,640 ISIS zu verwenden, wenn Sie möchten. 66 00:05:38,640 --> 00:05:44,910 Und zu guter Letzt drücken alle Add-Ons, um etwas zu tun, wenn tote Tasten gedrückt werden. 67 00:05:44,910 --> 00:05:52,200 Und jetzt sollte dies eine gut aussehende Menüschaltfläche hier auf diesem Bildschirm darstellen, und tatsächlich sehen wir sie hier 68 00:05:52,830 --> 00:05:53,600 auf uns. 69 00:05:53,640 --> 00:05:55,730 Und wir sehen es auch auf Android. 70 00:05:55,740 --> 00:06:00,040 Nun noch einmal, wenn Sie ein anderes Symbol auf Android möchten, das eher wie ein typisches Android-Symbol aussieht. 71 00:06:00,090 --> 00:06:05,550 Das Gleiche gilt für die Taps, da Sie mithilfe der Plattform-API ein anderes Symbol rendern 72 00:06:06,350 --> 00:06:09,680 können, um Zeit zu sparen. Ich verwende dieselben Symbole. 73 00:06:09,720 --> 00:06:11,910 So zeigen wir das Symbol an. 74 00:06:11,910 --> 00:06:18,360 Wie können wir jetzt eine Auslosung eröffnen, obwohl wir dafür Zugriff auf die Navigationsstütze benötigen und diesen 75 00:06:18,360 --> 00:06:21,420 Zugriff in den Navigationsoptionen wie diesen nicht haben. 76 00:06:21,420 --> 00:06:27,330 Aber natürlich haben wir früher gelernt, dass Sie das Funktionsformular hier verwenden können, wo Sie dann Ihre Navigationsdaten 77 00:06:27,330 --> 00:06:27,680 erhalten. 78 00:06:27,690 --> 00:06:33,180 Sie könnten in dieser Funktion sagen, dass Sie dann Ihr Konfigurationsobjekt zurückgeben müssen. 79 00:06:33,180 --> 00:06:36,720 Hier müssen Sie also am Ende ein Objekt zurückgeben. 80 00:06:36,930 --> 00:06:40,170 Und jetzt hat nav data eine solche Navigationsstütze. 81 00:06:40,170 --> 00:06:46,380 Jetzt hier in der Presse können wir sagen, dass Nav-Daten Punktnavigation Dad jetzt verfügbar sein wird, die durch 82 00:06:46,380 --> 00:06:50,350 die Reaktionsnavigation bereitgestellt wird, die diese Funktion am Ende ausführt. 83 00:06:50,550 --> 00:06:54,030 Und dort haben Sie eine Umschalt-Zeichenmethode. 84 00:06:54,030 --> 00:06:59,850 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 85 00:06:59,850 --> 00:07:01,890 ist, und schließt es, wenn es geöffnet ist. 86 00:07:01,890 --> 00:07:06,440 Also hier müssen Sie Draw umschalten und Dash sollte das Seitenmenü öffnen. 87 00:07:06,440 --> 00:07:12,570 Wenn wir also speichern, dass sich die Schublade jetzt tatsächlich öffnet, können wir in einer Sekunde an dem Stil 88 00:07:12,570 --> 00:07:20,890 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. 89 00:07:20,930 --> 00:07:22,690 Stellen wir sicher, dass wir einen Favoriten sagen müssen. 90 00:07:22,700 --> 00:07:27,050 Und natürlich können Sie alle hier ein Video hinterlegen und es selbst machen, da die 91 00:07:27,050 --> 00:07:29,570 Schritte dieselben sind wie für die Essenskategorien hier. 92 00:07:29,570 --> 00:07:34,430 Es ist eine schöne Übung, aber nach dieser kurzen Pause müssen Sie dieses Video weitergeben. Wir 93 00:07:36,210 --> 00:07:38,520 machen es zusammen, also waren Sie erfolgreich. 94 00:07:38,520 --> 00:07:46,400 Lassen Sie es uns gemeinsam tun und am Ende geht es nur darum, dieses Setup hier zu kopieren. 2D-Favoritenbildschirm, 95 00:07:47,060 --> 00:07:53,210 also kopiere ich das gesamte Setup der Navigationsoptionen vom Kategorienbildschirm auf den Favoritenbildschirm und ersetze 96 00:07:53,660 --> 00:07:58,760 meine Navigationsoptionssteuerung damit natürlich, was bedeutet, dass ich Ich muss uns 97 00:07:58,760 --> 00:08:05,450 hier in den Favoritenbildschirm umbenennen und hier den Titel wieder in Ihre Favoriten ändern, aber jetzt 98 00:08:05,450 --> 00:08:12,130 habe ich bereits diese Funktion zur Erstellung dynamischer Navigationsoptionen hier, bei der ich den Zeichnungsaufruf hier 99 00:08:12,170 --> 00:08:17,720 umschalten muss Sicher, wir importieren alle Dinge, die wir importieren müssen, und für Dad 100 00:08:17,720 --> 00:08:25,100 können wir die Importe hier sowohl vom Kategorienbildschirm als auch vom Paket "React Navigation Had" oder "Buttons" abrufen. 101 00:08:25,100 --> 00:08:27,020 Und von unserer eigenen Kopfzeile. 102 00:08:27,020 --> 00:08:34,920 Schnapp dir das und füge es hier auf dem Lieblingsbildschirm mit Dad hinzu, wenn wir es gespeichert haben, da dies alles jetzt 103 00:08:34,930 --> 00:08:41,100 auf dem Lieblingsbildschirm sein sollte, den wir auch zeichnen müssen, und du kannst es auch dort öffnen. 104 00:08:41,120 --> 00:08:46,180 Wir können es nicht einfach so öffnen, wenn wir auf klicken Filterrolle für den 105 00:08:46,180 --> 00:08:52,160 Filterbildschirm dort haben wir gerade keinen Weg zurück, aber das ist eigentlich etwas, das wir alle 106 00:08:52,220 --> 00:09:02,560 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 107 00:09:02,680 --> 00:09:07,280 Whip enden und dann alle Optionen zum Hinzufügen nach Navigation hier. 108 00:09:07,570 --> 00:09:13,780 Kopieren Sie also die Navigationsoptionen aus dem Lieblingsbildschirm dieser dynamischen Funktion und fügen Sie sie dem Filterbildschirm hinzu 109 00:09:13,840 --> 00:09:19,900 und ersetzen Sie die Navigationsoptionstreppe natürlich. Ändern Sie sie dann dieses Jahr wieder in den Filterbildschirm und 110 00:09:19,960 --> 00:09:27,730 ändern Sie sie in den Titel zurück, um die Mahlzeiten zu filtern oder was auch immer Sie hier und wollen Damit sollten wir 111 00:09:27,940 --> 00:09:34,600 auch einen Draw auf dem Filterbildschirm haben und das erlaubt uns, zu unseren Mahlzeiten zurückzukehren, jetzt fehlen jedoch ein 112 00:09:34,600 --> 00:09:35,580 paar Dinge. 113 00:09:35,620 --> 00:09:40,870 Zum Beispiel auf dem Filterbildschirm sieht die Kopfzeile völlig anders aus und deshalb kann ich 114 00:09:40,870 --> 00:09:46,930 hier auf Android meine Schaltfläche nicht einmal sehen, weil sie weiß ist. Der Text hier ist nicht der 115 00:09:46,930 --> 00:09:55,570 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 116 00:09:55,720 --> 00:09:59,820 wurde hinzugefügt, und wie Sie wieder sehen, mit sehr geringem Aufwand. 117 00:09:59,890 --> 00:10:03,550 Lassen Sie uns nun die Gestaltung der Zeichnung und des Filters des Bildschirms berücksichtigen.