1 00:00:02,710 --> 00:00:07,840 Jetzt haben wir uns die grundlegende Navigation mit Navigieren angesehen und Navigieren ist Ihr wichtigstes 2 00:00:08,020 --> 00:00:13,720 Werkzeug. Wenn Sie sich jedoch innerhalb eines Bildschirms einer Komponente befinden, die mithilfe eines Stapelnavigators geladen wurde, 3 00:00:13,870 --> 00:00:15,950 haben Sie Alternativen zum Navigieren. 4 00:00:15,970 --> 00:00:22,450 Sie können auch Push verwenden, anstatt zu navigieren. Dabei wird jedoch kein Javascript-Objekt verwendet, sondern nur der Routenname. 5 00:00:22,450 --> 00:00:24,240 In diesem Fall werden 6 00:00:24,250 --> 00:00:30,280 die Mahlzeiten der Kategorie als erstes Argument verwendet. Damit erhalten Sie das gleiche Verhalten wie zuvor. 7 00:00:30,610 --> 00:00:33,200 Die Frage ist natürlich, warum Sie dies dann verwenden würden. 8 00:00:33,250 --> 00:00:37,960 Nummer eins, es ist etwas kürzer als das Navigieren, weil Sie kein Objekt 9 00:00:37,960 --> 00:00:39,440 übergeben, aber das ist 10 00:00:39,490 --> 00:00:47,880 nicht der Hauptgrund. Stattdessen kann die Verwendung von Push hier nützlich sein, wenn Sie beispielsweise eine Seite aufrufen möchten, auf der Sie sich bereits befinden. 11 00:00:47,960 --> 00:00:49,100 Lassen Sie mich Ihnen jetzt zeigen, was ich meine. 12 00:00:49,120 --> 00:00:53,560 Wenn ich dies zurücksetze und hier zu Kategorien navigiere, gehe ich zum 13 00:00:53,590 --> 00:00:59,650 Kategoriebildschirm, in dem ich mich bereits befinde. Wenn ich das mit navigieren mache, werden Sie sehen, 14 00:00:59,800 --> 00:01:02,690 dass nichts passiert, wenn ich darauf tippe. 15 00:01:02,930 --> 00:01:10,760 Wenn ich stattdessen Push verwende und daher nur Kategorien als erstes Argument übergebe, weil Push so funktioniert, werden Sie sehen, dass 16 00:01:10,760 --> 00:01:16,490 dies jetzt funktioniert und ich immer wieder zum selben Bildschirm wechseln kann und es immer wieder 17 00:01:16,490 --> 00:01:19,810 zum selben Stapel verschoben wird und immer wieder. 18 00:01:19,820 --> 00:01:26,030 Jetzt fragen Sie sich natürlich vielleicht, warum ich den Bildschirm, auf dem ich mich bereits befinde, wieder darauf schieben möchte. 19 00:01:26,030 --> 00:01:32,150 In vielen Apps benötigen Sie dies möglicherweise nicht, aber nehmen wir an, Sie erstellen eine App wie Dropbox, in der Sie Ordner 20 00:01:32,150 --> 00:01:33,370 haben, zwischen denen Ihre 21 00:01:33,380 --> 00:01:35,440 Benutzer navigieren können. Wenn Sie sich in 22 00:01:35,570 --> 00:01:38,330 einem Ordner befinden, möchten Sie zu einem anderen Ordner wechseln. 23 00:01:38,330 --> 00:01:44,960 Jetzt ist jeder Ordner technisch gesehen der gleiche Ordnerbildschirm, nur mit unterschiedlichen Inhalten. In einem solchen Fall möchten Sie möglicherweise von Ordner A 24 00:01:44,960 --> 00:01:50,720 nach B wechseln, in dem dieselbe Komponente, am Ende derselbe Bildschirm, aber mit unterschiedlichem Inhalt verwendet wird. 25 00:01:50,720 --> 00:01:56,540 In einem solchen Fall können Sie Push verwenden, um den neuen Bildschirm weiterhin zu verschieben Ist derselbe Bildschirm 26 00:01:56,540 --> 00:02:02,580 auf den Stapel und laden Sie den gleichen Bildschirm mit unterschiedlichem Inhalt. Dies wäre ein Szenario, in dem 27 00:02:02,600 --> 00:02:05,860 Sie dies benötigen könnten. In dieser App benötigen 28 00:02:05,870 --> 00:02:11,720 wir es nicht, sodass kein Push erforderlich ist. Sie haben dies jedoch in Szenarien, in 29 00:02:11,720 --> 00:02:13,100 denen die Navigation 30 00:02:13,100 --> 00:02:15,830 Sie nicht zu diesem Bildschirm führt. Push 31 00:02:15,830 --> 00:02:23,630 wird immer angezeigt, wenn Sie sich in einem Stack-Navigator befinden. Hier werde ich dies jedoch auf Navigation zurücksetzen, wobei ein Objekt mit einem Routennamen 32 00:02:23,630 --> 00:02:31,800 verwendet wird, der dann auf Kategorien zeigt, da wir hier absolut keinen Push benötigen, dh Kategorie-Mahlzeiten. Dies ist also für diese App ausreichend. Jetzt haben 33 00:02:31,800 --> 00:02:33,330 Sie auch andere 34 00:02:33,330 --> 00:02:36,370 explizite Navigationsoptionen. Nehmen wir an, Sie 35 00:02:36,420 --> 00:02:39,600 möchten in der Kategorie "Mahlzeit" zurückkehren können. 36 00:02:39,840 --> 00:02:45,330 Natürlich können wir mit Hilfe dieser Zurück-Schaltfläche zurückgehen, aber es ist auch nicht so untypisch, dass Sie 37 00:02:45,360 --> 00:02:51,140 in einigen Apps andere Dinge tun können, die Ihre Benutzer dort tun können, wo Sie sie damals hinnehmen möchten, 38 00:02:51,150 --> 00:02:55,890 zum Beispiel Sie befinden sich auf einer Seite, auf der Sie eine Konfiguration einrichten 39 00:02:55,890 --> 00:03:01,180 können. Wenn Sie auf die Schaltfläche Speichern klicken, möchten Sie diese Konfiguration speichern und den Bildschirm verlassen. 40 00:03:01,290 --> 00:03:07,410 In diesem Szenario möchten Sie möglicherweise eine Rücknavigation manuell auslösen können und nicht darauf warten, dass der Benutzer 41 00:03:07,410 --> 00:03:13,260 die Zurück-Taste drückt, da dies den Benutzer möglicherweise dazu zwingt, zuerst eine Speichern-Taste zu drücken und dann 42 00:03:13,260 --> 00:03:17,040 manuell zurückzukehren, was nicht der Fall ist die beste Benutzererfahrung. 43 00:03:17,070 --> 00:03:24,210 Also hier werde ich dies irgendwie simulieren, indem ich hier auf unserem Bildschirm nur eine Zurück-Schaltfläche habe. In unserem jsx-Code 44 00:03:24,210 --> 00:03:30,090 und wenn wir diese drücken, möchte ich in der Lage sein, zurück zu gehen, ich möchte 45 00:03:30,090 --> 00:03:31,790 manuell eine Zurück-Navigation auslösen. 46 00:03:31,950 --> 00:03:37,740 Sie können dies mit Hilfe der Navigations-Requisite tun, da Sie dort eine Zurück-Methode haben, die Sie aufrufen können, 47 00:03:37,740 --> 00:03:41,030 und die genau das tut, wonach es sich anhört. 48 00:03:41,230 --> 00:03:46,380 Wenn wir dies speichern und ich zu den Mahlzeiten gehe, wenn ich auf Zurück klicke, spielen wir die Rückennavigation. 49 00:03:46,380 --> 00:03:51,960 Technisch gesehen springt dies von dem Bildschirm, auf dem wir uns befinden, und 50 00:03:51,960 --> 00:03:58,860 kehrt daher zum vorherigen Bildschirm im Stapel zurück. Wenn Sie sich in einem Stack-Navigator befinden, haben Sie alternativ auch Pop, 51 00:03:58,860 --> 00:04:01,740 das das tut, was der Name andeutet. Es wird vom 52 00:04:02,010 --> 00:04:08,730 aktuellen Bildschirm auf dem Stack angezeigt. Da Sie auf Ihrem Gerät immer den obersten Bildschirm sehen, ist dies auch der Fall spielt die 53 00:04:08,730 --> 00:04:14,240 Rückennavigation ab, daher ist dies eine Alternative zum Zurückgehen. Der Unterschied besteht darin, dass Pop nur verwendet werden kann, wenn Sie 54 00:04:14,240 --> 00:04:14,980 sich in 55 00:04:15,090 --> 00:04:19,770 einem Stack-Navigator befinden. Das Zurückgehen ist auch in anderen Navigatoren verfügbar, die wir später in diesem Modul verwenden werden. 56 00:04:22,340 --> 00:04:27,000 Manchmal möchten Sie auch bis zu Ihrer übergeordneten Komponente 57 00:04:27,140 --> 00:04:34,730 zurückkehren, sagen wir hier im MealDetailScreen. Dort können wir auch eine Schaltfläche 58 00:04:34,730 --> 00:04:39,390 hinzufügen und auf dieser Schaltfläche möchte ich zu meinen 59 00:04:39,390 --> 00:04:49,090 Kategorien zurückkehren, sagen wir, und deshalb werde ich onPress hinzufügen und in dieser Funktion hier kann ich Requisiten-Navigations-Pop 60 00:04:49,090 --> 00:04:56,860 verwenden, richtig, weil dies uns zurückbringt . 61 00:04:56,860 --> 00:04:59,230 Nun, das Problem dabei ist natürlich, dass es mich zurückbringt, aber nur zum Bildschirm vor diesem Bildschirm, also zum Bildschirm. 62 00:04:59,230 --> 00:05:03,250 Ich komme von. Ich möchte jedoch zum 63 00:05:03,250 --> 00:05:06,040 Kategorienbildschirm zurückkehren und zwei Bildschirme gleichzeitig überspringen. 64 00:05:06,250 --> 00:05:08,450 Dazu haben Sie Pop to Top. Dies ist 65 00:05:08,560 --> 00:05:14,260 eine weitere Methode, die Sie aufrufen können. Dabei werden einfach alle Bildschirme aus dem Stapel eingeblendet und Sie kehren 66 00:05:14,470 --> 00:05:15,970 zu Ihrem Stammbildschirm zurück. 67 00:05:16,390 --> 00:05:21,100 Wenn Sie also darauf klicken, erhalten wir die Hintergrundanimation und befinden uns wieder auf unserem 68 00:05:21,220 --> 00:05:22,720 Stammbildschirm, in diesem Fall 69 00:05:22,720 --> 00:05:27,570 dem Kategoriebildschirm. Dies ist hier also eine Alternative. Damit gibt es nur noch 70 00:05:27,580 --> 00:05:33,780 eine letzte mögliche Navigationsaktion, die Sie manchmal benötigen. Angenommen, Sie möchten auf dem Kategorienbildschirm zu Kategoriemahlzeiten 71 00:05:34,050 --> 00:05:41,880 wechseln, diese jedoch nicht zum Stapel hinzufügen, sondern stattdessen Ihre aktuelle Komponente im Stapel durch diese ersetzen, sodass immer noch nur 72 00:05:41,940 --> 00:05:47,790 ein Bildschirm vorhanden ist Der Stapel, aber dieser Bildschirm ist dann eine neue Seite. Dies bedeutet 73 00:05:47,790 --> 00:05:49,570 auch, dass Sie nicht 74 00:05:49,620 --> 00:05:54,630 zur neuen Seite zurückkehren können, da der Stapel danach leer wäre, was bedeutet, 75 00:05:54,630 --> 00:05:56,820 dass Ihre App geschlossen wird. 76 00:05:56,820 --> 00:06:00,990 Wenn Sie dies tun möchten, können Sie Ersetzen verwenden. Ersetzen Sie auch so, 77 00:06:01,020 --> 00:06:09,150 wie Push nur eine Kennung wie diese verwendet, und Ersetzen führt Sie auch zum neuen Bildschirm. Es wird jedoch 78 00:06:09,150 --> 00:06:15,240 keine Vorwärtsanimation abgespielt. Stattdessen springt es sofort dorthin und Sie erhalten automatisch keine Zurück-Schaltfläche, 79 00:06:15,240 --> 00:06:19,030 da der Stapel ansonsten leer ist einziger Bildschirm. 80 00:06:19,200 --> 00:06:24,540 Dies kann beispielsweise auf einem Anmeldebildschirm verwendet werden, auf dem sich ein Benutzer angemeldet hat. Nach 81 00:06:24,540 --> 00:06:26,990 der Anmeldung sollte der Benutzer nicht mehr zum 82 00:06:27,030 --> 00:06:32,430 Anmeldebildschirm zurückkehren können. Dann können Sie einfach den Anmeldebildschirm durch Ihren angemeldeten Bildschirm ersetzen im Bildschirm mit 83 00:06:32,430 --> 00:06:34,370 dem Benutzerprofil oder so ähnlich. 84 00:06:34,620 --> 00:06:39,930 Wenn Sie immer noch versuchen, zurückzukehren, passiert nichts, weil Sie nicht zurückkehren können. Es befindet 85 00:06:39,930 --> 00:06:44,390 sich nichts anderes im Stapel. Daher ist das Ersetzen natürlich nicht 86 00:06:44,430 --> 00:06:51,600 das, was wir in dieser App benötigen. Ich wollte dies hier nur vorstellen, obwohl wir mehr verfügbare Muster sehen werden und wie 87 00:06:51,630 --> 00:06:56,810 Sie zwischen Seiten hin und her gehen und wann Sie möglicherweise ersetzen oder zwischen Bildschirmen wechseln 88 00:06:56,830 --> 00:07:02,610 möchten so wie in diesem Modul, wollte es nur schon an dieser Stelle einführen, noch hier werde ich 89 00:07:02,910 --> 00:07:10,680 zurückgehen, um mit dem Routennamen zu navigieren, der auf Kategorie Mahlzeiten zeigt. Damit hatten Sie einen Überblick über einige der grundlegenden Navigationsmethoden, mit denen Sie 90 00:07:10,800 --> 00:07:16,230 zwischen Ihren Bildschirmen hin und her wechseln können. Wie ich bereits erwähnt habe, werden wir in diesem 91 00:07:16,230 --> 00:07:22,500 Modul natürlich viele Muster in Aktion sehen. Im Moment ist dies der Fall, und ich würde sagen, dass es 92 00:07:22,500 --> 00:07:30,180 an der Zeit ist, dieser Anwendung tatsächlich etwas Fleisch hinzuzufügen. Stellen Sie sicher, dass es sich um ein Muster handelt realistischere Anwendung und nicht 93 00:07:30,330 --> 00:07:33,030 nur eine Dummy-Anwendung wie sie derzeit ist.