1 00:00:02,520 --> 00:00:07,110 Jetzt arbeiten wir ziemlich viel mit der Navigation und können uns vorwärts und rückwärts bewegen. 2 00:00:07,110 --> 00:00:13,620 Hier erfahren Sie, wie Sie diesem Header Symbole und Aktionsschaltflächen hinzufügen, wie Sie den Header im Allgemeinen formatieren und steuern und wie Sie Daten 3 00:00:13,620 --> 00:00:18,630 weitergeben. Dies sind alles wichtige Dinge für mobile Apps, die Sie mit React Native erstellen. Natürlich sind dies 4 00:00:18,630 --> 00:00:23,610 Dinge, die Sie tun werden Führen Sie dies immer wieder durch, wenn Sie mit React Native arbeiten, 5 00:00:23,790 --> 00:00:24,980 um Apps zu erstellen. 6 00:00:25,050 --> 00:00:31,170 Dies ist nicht die einzige Form der Navigation, die wir implementieren können, obwohl wir auch unten auf tippen können, 7 00:00:31,440 --> 00:00:36,330 um zwischen verschiedenen Abschnitten in seiner App zu wechseln, die natürlich alle ein typisches 8 00:00:36,330 --> 00:00:42,210 Muster aufweisen, das Sie von mobilen Apps kennen, und das auch das Muster ist Ich habe zu 9 00:00:42,210 --> 00:00:49,950 Beginn dieses Moduls skizziert, dass ich zwei Taps in seiner App haben möchte, einen für alle unsere Mahlzeiten oder in diesem Fall alle 10 00:00:49,950 --> 00:00:55,440 unsere Kategorien und einen für nur unsere Lieblingsgerichte, die Mahlzeiten, die wir als Favoriten markiert haben. 11 00:00:55,500 --> 00:01:01,640 Das bringt uns natürlich zu einer wichtigen Frage, wie wir bei der Arbeit mit der Reaktionsnavigation Taps hinzufügen können. 12 00:01:01,800 --> 00:01:05,010 Und das ist zum Glück nicht allzu schwierig. 13 00:01:05,010 --> 00:01:09,840 Gehen wir zu unserer James-Datei für den Essensnavigator, in der wir die Navigation eingerichtet und dort 14 00:01:09,840 --> 00:01:11,090 einen Stapelnavigator erstellt haben. 15 00:01:11,190 --> 00:01:17,460 Sie benötigen einen Stapel-Navigator, wenn in Ihrer App Bildschirmseiten vorhanden sind, die mit einem solchen 16 00:01:17,460 --> 00:01:19,020 Vorwärts-Rückwärts-Fluss verbunden sind. 17 00:01:19,020 --> 00:01:21,140 Das ist die typische Stack-Navigation. 18 00:01:21,140 --> 00:01:26,910 Was wir hier verwenden, wird das natürlich noch brauchen, auch wenn wir jetzt alle Anzeigen abhören. 19 00:01:26,970 --> 00:01:32,910 Das Gute ist, dass Sie einfach mehrere Navigatoren in Ihrer Anwendung haben können, und 20 00:01:32,940 --> 00:01:39,190 das ist jetzt genau richtig für die Rick-Navigation neben dem Stapel-Navigator, der die Stapel-Navigator-Funktion erstellt. 21 00:01:39,210 --> 00:01:45,240 Wir können auch den Navigator zum Erstellen von unteren Registerkarten importieren. Auf diese Weise können wir einen Navigator 22 00:01:45,240 --> 00:01:48,080 erstellen, der mit Tippen am unteren Rand funktioniert. 23 00:01:49,050 --> 00:01:56,220 Erstellen Sie also den unteren Tab-Navigator, und wir können einfach diesen zusätzlichen Navigator neben unserem Essensnavigator erstellen. Sagen 24 00:01:56,220 --> 00:02:04,230 wir, hier werde ich den Pfaff-Tab-Navigator für Mahlzeiten nennen. Sie können ihn so benennen, wie Sie möchten, um wirklich klar 25 00:02:04,230 --> 00:02:10,110 zu sein, was sein Navigator ist Steuerelemente und Radsteuerelemente sind Mahlzeiten und Favoriten mit 26 00:02:10,110 --> 00:02:17,550 Tippen, und ich rufe den Navigator für die untere Registerkarte erstellen auf und speichere das Ergebnis davon in dieser 27 00:02:17,550 --> 00:02:18,290 Konstante. 28 00:02:18,360 --> 00:02:24,210 Das Ergebnis dieser Gerechtigkeit für den Stack-Navigator ist nicht das Ende einer Reaktionskomponente. 29 00:02:24,210 --> 00:02:27,730 Also können wir das hier speichern und wir werden bald in der Lage sein, die Entfernung zu nutzen. 30 00:02:28,410 --> 00:02:34,650 Wie konfigurieren wir nun diesen Tab-Navigator? Wie der Stack-Navigator nimmt auch der Tab-Navigator das Objekt, in dem wir 31 00:02:34,650 --> 00:02:40,590 es über die verschiedenen Taps informieren müssen, sozusagen die verschiedenen Abschnitte auf verschiedene Bildschirme, die Sie laden 32 00:02:40,590 --> 00:02:46,880 möchten, wenn wir auf verschiedene klicken tippen und dort habe ich zwei Registerkarten, von denen ich möchte, dass 33 00:02:46,880 --> 00:02:49,790 eine Registerkarte das ist, was wir hier sehen. 34 00:02:49,830 --> 00:02:55,980 Also unser Stack am Ende nicht nur dieser Bildschirm, sondern alle Funktionen, um zu einem anderen Bildschirm zu wechseln. 35 00:02:56,010 --> 00:03:02,310 Ich möchte also den gesamten Stapel hier auf einer Registerkarte und einen anderen Bildschirm oder einen 36 00:03:02,310 --> 00:03:11,780 anderen Stapel auf der Registerkarte Abbott haben. Das Gute ist, dass Sie in diesem Navigator einen Stapel oder einen anderen Navigator als Bildschirm verwenden können. 37 00:03:12,040 --> 00:03:15,130 Hier können Sie also eine Kennung einrichten. 38 00:03:15,220 --> 00:03:16,570 Nennen wir es vielleicht Mahlzeiten. 39 00:03:16,570 --> 00:03:18,140 Das liegt ganz bei Ihnen. 40 00:03:18,250 --> 00:03:21,060 Und jetzt können Sie hier auf einen Bildschirm zeigen. 41 00:03:21,100 --> 00:03:27,100 Sie können dieses lange Formular auch mit Bildschirm verwenden, aber ich verwende die Verknüpfung und zeige direkt 42 00:03:27,100 --> 00:03:35,070 auf einen Bildschirm hier auf dem Bildschirm. Hinzufügen, auf den Sie hier zeigen, kann sogar nur eine Reaktionskomponente sein, wie wir sie hier im 43 00:03:35,070 --> 00:03:36,520 Bildschirmordner oder erstellt haben. 44 00:03:36,540 --> 00:03:40,270 Nun, seit diesem Jahr, wie ich bereits erwähnte, sind alle Renditen eine echte Komponente. 45 00:03:40,290 --> 00:03:42,840 Dies kann auch das Ergebnis von create stack Navigator sein. 46 00:03:42,840 --> 00:03:50,350 In der Tat werde ich hier den Essensnavigator als meinen Bildschirm verwenden, um für die Registerkarte Mahlzeiten geladen zu werden. 47 00:03:50,420 --> 00:03:54,320 In der Tat funktioniert es so, wie wir dies einrichten können. 48 00:03:54,480 --> 00:03:56,420 Das ist also unser erster Tipp. 49 00:03:56,430 --> 00:03:59,300 Die zweite Registerkarte wird unsere Favoriten sein und dort. 50 00:03:59,340 --> 00:04:01,290 Ich habe noch keinen Stapel. 51 00:04:01,290 --> 00:04:07,940 Wir werden vielleicht später einen hinzufügen, aber jetzt zeige ich nur auf den Favoritenbildschirm, also importieren wir tote Favoriten. 52 00:04:07,950 --> 00:04:16,230 Bildschirm hier in der Mahlzeit Navigator Datei Import Favoriten Bildschirm aus dem Bildschirm Ordner und sie sind Favoriten 53 00:04:16,260 --> 00:04:18,000 Bildschirm wie folgt. 54 00:04:18,180 --> 00:04:27,980 Zeigen Sie jetzt einfach auf den Favoritenbildschirm, um unsere Favoriten-ID im unteren Registerkarten-Navigator anzuzeigen. 55 00:04:28,080 --> 00:04:30,930 So einfach können wir einen Tab Navigator einrichten. 56 00:04:30,930 --> 00:04:33,340 Die Frage ist nun, wie wir es verwenden. 57 00:04:33,420 --> 00:04:39,000 Nun, am Ende ist es jetzt dieser Navigator, den wir als Routennavigator in der App verwenden 58 00:04:39,000 --> 00:04:41,510 möchten, da er unseren vorhandenen Essensnavigator enthält. 59 00:04:41,610 --> 00:04:44,520 Außerdem können wir zum Lieblingsbildschirm wechseln. 60 00:04:44,520 --> 00:04:50,010 Letztendlich verwende ich dieses Jahr nur in meinem App-Container anstelle des Essensnavigators, da der 61 00:04:50,010 --> 00:04:56,600 Essensnavigator jetzt in diesem Registerkartennavigator verschachtelt ist. Auf diese Weise können Sie mehrere Navigatoren in einer nativen App 62 00:04:56,620 --> 00:05:02,400 kombinieren, die von der Rack-Navigation gesteuert wird, weil Sie dies einfach können mischen und zusammenpassen. 63 00:05:02,400 --> 00:05:07,740 Sie haben immer einen Routennavigator in Ihrem App-Container und das macht Sinn, dass Sie einen Einstiegspunkt in Ihre 64 00:05:07,740 --> 00:05:14,550 App haben, aber dieser Routennavigator kann natürlich unsere verschachtelten Navigatoren haben, wie wir sie hier für diesen Tipp haben, wo wir auf den 65 00:05:14,550 --> 00:05:20,670 Essensnavigator zeigen und wenn wir dies jetzt sicher speichern und unsere App daher neu startet, sehen Sie jetzt, dass wir 66 00:05:20,670 --> 00:05:25,950 hier unten Registerkarten haben und wir können darauf klicken, um zu unserem Essensstapel hier zu gelangen, und 67 00:05:26,160 --> 00:05:32,550 wir können diesen Stapel wie zuvor verwenden, aber ich kann auch zu Favoriten wechseln Gehen Sie zurück zu meinem Stapel, in 68 00:05:32,550 --> 00:05:37,340 dem sogar angegeben ist, dass er sich befindet, und so einfach können wir Aufgaben hinzufügen. 69 00:05:37,380 --> 00:05:39,210 Das gleiche gilt natürlich auch für Android. 70 00:05:39,480 --> 00:05:44,540 Jetzt ist es natürlich auch bemerkenswert, dass diese Taps nicht richtig aussehen, aber es wäre schön, wenn ich sie 71 00:05:44,540 --> 00:05:49,290 hören könnte und nicht nur einen Text, und wir werden uns um die Konfiguration dieser Taps kümmern. 72 00:05:49,290 --> 00:05:54,660 Nur eine Sekunde, aber so einfach können wir mit Tippen beginnen. So können 73 00:05:54,660 --> 00:06:00,620 Sie über die Verwendung mehrerer Navigatoren in einer Reaktionsnavigations-App oder in der App mit Reaktionsnavigation nachdenken. 74 00:06:00,630 --> 00:06:05,490 Nun wollen wir sehen, wie wir tatsächlich Symbole hinzufügen können und wie wir unsere Wasserhähne ein bisschen mehr konfigurieren können, um 75 00:06:05,490 --> 00:06:08,160 auch eine andere Farbe als dieses standardmäßige blaue Jahr zu verwenden.