1 00:00:02,340 --> 00:00:08,460 Es ist wichtig zu verstehen, wie Navigation und native Apps funktionieren, und insbesondere wenn Sie einen Webentwicklungshintergrund haben, ist 2 00:00:08,460 --> 00:00:14,400 es wichtig zu verstehen, wie er sich von der Navigation zwischen Bildschirmen und dem Web unterscheidet, da Sie 3 00:00:14,460 --> 00:00:20,760 im Web tatsächlich ein L eingeben und wenn Sie erstellen In einer Reaktions-App verwenden Sie ein Tool, um den 4 00:00:20,760 --> 00:00:24,240 Router zu reagieren und dann die Benutzerkomponente zu laden. 5 00:00:24,240 --> 00:00:30,640 Und wenn Sie erneut auf einen Link klicken, der zu meinen Dotcom Slash-Produkten auf meiner Website führt, erkennt der Reaktionsrouter, bei dem es sich um eine zusätzliche Bibliothek handelt, die Sie installiert 6 00:00:30,660 --> 00:00:37,950 haben, dass Sie den Pfad in Ihrem U ändern. R. L. L. und lädt eine andere 7 00:00:37,950 --> 00:00:38,820 Reaktionskomponente. 8 00:00:38,850 --> 00:00:40,800 So funktioniert die Navigation im Web. 9 00:00:40,890 --> 00:00:47,880 Also bist du L ist deine Quelle der Wahrheit und die Änderung, dass du l bist, könnte von Bibliotheken wie React Router aufgegriffen 10 00:00:47,880 --> 00:00:51,220 werden, die dann verschiedene Komponenten auf den Bildschirm gerendert haben. 11 00:00:51,240 --> 00:00:53,910 So reagiere ich auf Webarbeiten. 12 00:00:54,030 --> 00:00:57,990 Nun gibt es einen wichtigen Unterschied, wenn wir an native Apps denken. 13 00:00:58,070 --> 00:01:05,070 Wir haben keine Sie sind alle Benutzer gehen nicht in Ihrer App herum, indem Sie einige eingeben, Sie sind L, stattdessen 14 00:01:05,070 --> 00:01:09,510 drücken Sie die Tasten, drücken Sie auf und Sie gehen hin und zurück. 15 00:01:09,540 --> 00:01:16,050 Sie haben Zurück-Schaltflächen und seitliche Schubladen. So navigieren Sie in mobilen Apps, um genau zu sein. 16 00:01:16,050 --> 00:01:19,720 Wie ich bereits erwähnt habe, ist das Tippen ein häufiges Muster, das Sie dort sehen. 17 00:01:19,770 --> 00:01:25,170 Das durchschnittliche übliche Muster ist, dass Sie in einem Stapel von Seiten navigieren und dies bedeutet einfach, dass 18 00:01:25,170 --> 00:01:31,770 Sie zu einer Seite gehen, auf ein Element klicken, das Sie auf einen neuen Bildschirm gebracht haben, und dann automatisch eine 19 00:01:31,770 --> 00:01:36,210 Zurück-Schaltfläche oben oder auf Android erhalten habe natürlich einen in das gerät eingebaut. 20 00:01:36,210 --> 00:01:41,850 Und wenn Sie drücken, dass Sie zurück zu der Seite navigiert sind, auf der Sie zuvor waren, erhalten Sie 21 00:01:41,850 --> 00:01:43,100 einen reibungslosen Übergang dafür. 22 00:01:43,140 --> 00:01:48,660 Dort können Sie beispielsweise eine Benutzerkomponente laden, indem Sie auf die Registerkarte drücken oder auf ein spezielles 23 00:01:48,870 --> 00:01:54,270 Element drücken und dort navigieren. Die Behauptung sieht und fühlt sich einfach etwas anders an 24 00:01:54,270 --> 00:01:55,390 als die Benutzer. 25 00:01:55,500 --> 00:02:00,700 Jetzt möchten wir dieses Erscheinungsbild natürlich auch in unsere native ReACT-App integrieren. 26 00:02:00,780 --> 00:02:02,570 Und zum Glück ist das sehr einfach. 27 00:02:02,580 --> 00:02:09,310 Mit Hilfe einer Drittanbieter-Bibliothek wird die Drittanbieter-Bibliothek verwendet, die sie dafür 28 00:02:09,310 --> 00:02:16,630 verwendet. Ich habe meinen exponierten Server gestoppt. Hier ist die Reaktionsnavigation. Wir 29 00:02:16,720 --> 00:02:24,280 können sie mit npm installieren Es ist eigentlich eine Navigationsbibliothek, die für native 30 00:02:24,310 --> 00:02:26,660 Reaktionen entwickelt wurde. 31 00:02:26,680 --> 00:02:33,370 Jetzt können Sie es auch in Web-Apps verwenden. Der Schwerpunkt liegt jedoch auf nativen Apps, die mit React Native erstellt wurden. 32 00:02:33,370 --> 00:02:40,330 Obwohl es als React Navigation bezeichnet wird, ist es für React Native nicht nur für React für das Web. 33 00:02:40,870 --> 00:02:46,330 Daher können wir dieses Paket hier einfach in unsere Anwendung installieren, um mit der Verwendung zu beginnen. 34 00:02:46,330 --> 00:02:51,130 Und natürlich werde ich Ihnen die Vor- und Nachteile dieses Pakets und die Verwendung für 35 00:02:51,130 --> 00:02:53,200 verschiedene Navigationsmuster in diesem Modul beibringen. 36 00:02:53,200 --> 00:02:56,590 Aber für den Fall, dass Sie tiefer tauchen möchten oder auch eine schriftliche Anleitung haben möchten. 37 00:02:56,590 --> 00:03:02,280 Schauen Sie sich auf jeden Fall auch React Navigation Dot ORIC an, die offizielle Seite dieses Pakets, auf der Sie 38 00:03:02,290 --> 00:03:06,000 in die Docks eintauchen können, um alles über dieses Paket zu erfahren. 39 00:03:06,040 --> 00:03:09,400 Dort können Sie alles ausführlich lesen. 40 00:03:09,430 --> 00:03:13,320 Sie lernen, wie Sie es verwenden, wie Sie es konfigurieren und so weiter. 41 00:03:13,330 --> 00:03:19,360 Sie können viel damit anfangen, und obwohl ich hier den größten Teil davon behandeln werde, ist dies eine großartige 42 00:03:19,360 --> 00:03:21,680 Ressource für Sie, um tiefer zu tauchen. 43 00:03:21,760 --> 00:03:28,390 Jetzt sehen wir hier, was wir unbedingt tun sollten: Wir sollten diesen Befehlsbenutzer ausführen, der eine Reihe 44 00:03:28,390 --> 00:03:32,350 zusätzlicher Abhängigkeiten installiert, um auf die Navigationsanforderungen zu reagieren. 45 00:03:32,510 --> 00:03:39,670 Kopieren Sie diesen Befehl einfach von der Seite Erste Schritte hier und führen Sie ihn in Ihrem Projekt in 46 00:03:39,670 --> 00:03:46,180 der Befehlszeile des integrierten Terminals aus, in dem Sie nicht npm installieren, sondern Expo installieren. Der einzige Unterschied 47 00:03:46,180 --> 00:03:52,210 besteht darin, dass Expo, das hinter den Kulissen installiert wird, npm install ausführt wählt die spezifischen 48 00:03:52,300 --> 00:03:56,540 Versionen dieser Pakete aus, die mit Ihrer spezifischen Expo-Version funktionieren. 49 00:03:56,590 --> 00:04:01,750 Es ist also eine sicherere Version der npm-Installation, die man sagen könnte, und daher wird empfohlen, diese hier 50 00:04:01,750 --> 00:04:02,370 zu verwenden. 51 00:04:02,380 --> 00:04:07,600 In einem zusätzlichen Hinweis zu diesem Befehl und dieser Seite im Allgemeinen oben links auf dieser Seite sehen 52 00:04:07,600 --> 00:04:09,240 Sie die Version der React-Navigation. 53 00:04:09,250 --> 00:04:16,670 Diese Dokumente beziehen sich auf die Wiederverwendung in diesem Kurs, während sie in 3 oder 4 ziemlich gleich sind. 54 00:04:16,690 --> 00:04:22,570 Wir verwenden derzeit in 5 nicht, da Version 5 eine etwas andere Syntax verwendet, die wir im 55 00:04:22,580 --> 00:04:24,280 Moment nicht behandeln werden. 56 00:04:24,280 --> 00:04:30,760 Stellen Sie also sicher, dass Sie, wenn Sie auf die Dokumente zurückgreifen, tatsächlich Version 4 oder frei von der Dokumentation 57 00:04:30,760 --> 00:04:32,500 hier auswählen, um reibungslos fortzufahren. 58 00:04:32,530 --> 00:04:37,300 Natürlich können Sie immer einen Blick auf Version 5 werfen und manuell versuchen, sich an den Code anzupassen, 59 00:04:37,480 --> 00:04:42,720 wenn Sie möchten, aber für eine reibungslose Erfahrung liegt der Schwerpunkt natürlich auf React Native und nicht auf React Navigation. 60 00:04:42,820 --> 00:04:45,160 Stellen Sie sicher, dass Sie Version 4 oder ein freies Jahr auswählen. 61 00:04:45,220 --> 00:04:50,560 Dies ist nur eine kleine Randnotiz für den Fall, dass Sie sich über 62 00:04:50,560 --> 00:04:56,720 den Unterschied zwischen den Dokumenten hier und dem, was Sie in diesem Kurs sehen, 63 00:04:56,720 --> 00:04:57,550 wundern. 64 00:04:57,560 --> 00:05:05,540 Hier später im Kurs werde ich ein ganzes Modul zur Reaktionsnavigation fünf haben und später werde ich Ihnen zeigen, wie 65 00:05:05,540 --> 00:05:10,100 Sie Ihr Projekt konvertieren, um diese neueste Version zu verwenden. 66 00:05:10,100 --> 00:05:16,130 Hatten Sie also das Beste aus beiden Welten und lernen Sie beide Arten des Einrichtens und Navigierens und reagieren 67 00:05:16,130 --> 00:05:22,400 auf native Apps, denn sowohl für als auch für jede Zukunft, in der sie fünf Jahre und später ist, wird 68 00:05:22,760 --> 00:05:25,180 es sehr wichtig sein, dies zu wissen. 69 00:05:25,250 --> 00:05:30,890 Kopieren Sie also einfach diesen Befehl und stellen Sie sicher, dass wir neben der Installation 70 00:05:30,890 --> 00:05:36,830 der Reaktionsnavigation, die natürlich das Kernpaket darstellt, auch diese Pakete in das Projekt installieren, indem wir 71 00:05:36,830 --> 00:05:43,570 hier die Expo-Installation ausführen. Die Installation ist hier abgeschlossen. Ich kann meinen Expo-Server mit NPM start und neu starten 72 00:05:43,570 --> 00:05:46,540 Wir können jetzt mit der Reaktionsnavigation beginnen. 73 00:05:46,540 --> 00:05:51,550 Jetzt tauschen alle einen neuen Ordner in meinem Projekt und ich werde es Navigation nennen. 74 00:05:51,550 --> 00:05:57,140 Dies ist nicht etwas, was Sie tun müssen, aber es kann Ihnen helfen, Ihren Code sauber zu halten, weil dort drin. 75 00:05:57,140 --> 00:06:03,600 Ich werde eine neue Datei erstellen, alle erstellen meine Mahlzeiten Navigator Punkt J fallen. 76 00:06:03,640 --> 00:06:05,590 Jetzt liegt dieser Dateiname ganz bei Ihnen. 77 00:06:05,620 --> 00:06:12,970 Ich möchte nur darauf hinweisen, dass ich dort die Konfiguration für meine Navigation für meine Mahlzeiten-App einrichten werde, 78 00:06:12,970 --> 00:06:14,690 die ich hier erstelle. 79 00:06:14,710 --> 00:06:16,630 Deshalb ein Name wie dieser. 80 00:06:16,630 --> 00:06:22,420 Und es ist der Essensnavigator-Jazz-Herbst, in dem ich meine Konfiguration für die Navigation einrichten möchte. Ich 81 00:06:22,420 --> 00:06:29,530 möchte der Navigation mitteilen, welche Bibliothek wir installiert haben, welche verschiedenen Bildschirme wir haben, wie sie verbunden sind und 82 00:06:29,830 --> 00:06:32,880 wie wir uns zwischen ihnen bewegen möchten. 83 00:06:33,190 --> 00:06:36,670 Jetzt ist es einfacher, das einfach zu sehen, als nur darüber zu sprechen. 84 00:06:36,730 --> 00:06:41,350 Lassen Sie uns daher im Essensnavigator mit dem Einrichten einer Navigation beginnen.