Es ist wichtig zu verstehen, wie Navigation und native Apps funktionieren, und insbesondere wenn Sie einen Webentwicklungshintergrund haben, ist
es wichtig zu verstehen, wie er sich von der Navigation zwischen Bildschirmen und dem Web unterscheidet, da Sie
im Web tatsächlich ein L eingeben und wenn Sie erstellen In einer Reaktions-App verwenden Sie ein Tool, um den
Router zu reagieren und dann die Benutzerkomponente zu laden.
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
haben, dass Sie den Pfad in Ihrem U ändern. R. L. L. und lädt eine andere
Reaktionskomponente.
So funktioniert die Navigation im Web.
Also bist du L ist deine Quelle der Wahrheit und die Änderung, dass du l bist, könnte von Bibliotheken wie React Router aufgegriffen
werden, die dann verschiedene Komponenten auf den Bildschirm gerendert haben.
So reagiere ich auf Webarbeiten.
Nun gibt es einen wichtigen Unterschied, wenn wir an native Apps denken.
Wir haben keine Sie sind alle Benutzer gehen nicht in Ihrer App herum, indem Sie einige eingeben, Sie sind L, stattdessen
drücken Sie die Tasten, drücken Sie auf und Sie gehen hin und zurück.
Sie haben Zurück-Schaltflächen und seitliche Schubladen. So navigieren Sie in mobilen Apps, um genau zu sein.
Wie ich bereits erwähnt habe, ist das Tippen ein häufiges Muster, das Sie dort sehen.
Das durchschnittliche übliche Muster ist, dass Sie in einem Stapel von Seiten navigieren und dies bedeutet einfach, dass
Sie zu einer Seite gehen, auf ein Element klicken, das Sie auf einen neuen Bildschirm gebracht haben, und dann automatisch eine
Zurück-Schaltfläche oben oder auf Android erhalten habe natürlich einen in das gerät eingebaut.
Und wenn Sie drücken, dass Sie zurück zu der Seite navigiert sind, auf der Sie zuvor waren, erhalten Sie
einen reibungslosen Übergang dafür.
Dort können Sie beispielsweise eine Benutzerkomponente laden, indem Sie auf die Registerkarte drücken oder auf ein spezielles
Element drücken und dort navigieren. Die Behauptung sieht und fühlt sich einfach etwas anders an
als die Benutzer.
Jetzt möchten wir dieses Erscheinungsbild natürlich auch in unsere native ReACT-App integrieren.
Und zum Glück ist das sehr einfach.
Mit Hilfe einer Drittanbieter-Bibliothek wird die Drittanbieter-Bibliothek verwendet, die sie dafür
verwendet. Ich habe meinen exponierten Server gestoppt. Hier ist die Reaktionsnavigation. Wir
können sie mit npm installieren Es ist eigentlich eine Navigationsbibliothek, die für native
Reaktionen entwickelt wurde.
Jetzt können Sie es auch in Web-Apps verwenden. Der Schwerpunkt liegt jedoch auf nativen Apps, die mit React Native erstellt wurden.
Obwohl es als React Navigation bezeichnet wird, ist es für React Native nicht nur für React für das Web.
Daher können wir dieses Paket hier einfach in unsere Anwendung installieren, um mit der Verwendung zu beginnen.
Und natürlich werde ich Ihnen die Vor- und Nachteile dieses Pakets und die Verwendung für
verschiedene Navigationsmuster in diesem Modul beibringen.
Aber für den Fall, dass Sie tiefer tauchen möchten oder auch eine schriftliche Anleitung haben möchten.
Schauen Sie sich auf jeden Fall auch React Navigation Dot ORIC an, die offizielle Seite dieses Pakets, auf der Sie
in die Docks eintauchen können, um alles über dieses Paket zu erfahren.
Dort können Sie alles ausführlich lesen.
Sie lernen, wie Sie es verwenden, wie Sie es konfigurieren und so weiter.
Sie können viel damit anfangen, und obwohl ich hier den größten Teil davon behandeln werde, ist dies eine großartige
Ressource für Sie, um tiefer zu tauchen.
Jetzt sehen wir hier, was wir unbedingt tun sollten: Wir sollten diesen Befehlsbenutzer ausführen, der eine Reihe
zusätzlicher Abhängigkeiten installiert, um auf die Navigationsanforderungen zu reagieren.
Kopieren Sie diesen Befehl einfach von der Seite Erste Schritte hier und führen Sie ihn in Ihrem Projekt in
der Befehlszeile des integrierten Terminals aus, in dem Sie nicht npm installieren, sondern Expo installieren. Der einzige Unterschied
besteht darin, dass Expo, das hinter den Kulissen installiert wird, npm install ausführt wählt die spezifischen
Versionen dieser Pakete aus, die mit Ihrer spezifischen Expo-Version funktionieren.
Es ist also eine sicherere Version der npm-Installation, die man sagen könnte, und daher wird empfohlen, diese hier
zu verwenden.
In einem zusätzlichen Hinweis zu diesem Befehl und dieser Seite im Allgemeinen oben links auf dieser Seite sehen
Sie die Version der React-Navigation.
Diese Dokumente beziehen sich auf die Wiederverwendung in diesem Kurs, während sie in 3 oder 4 ziemlich gleich sind.
Wir verwenden derzeit in 5 nicht, da Version 5 eine etwas andere Syntax verwendet, die wir im
Moment nicht behandeln werden.
Stellen Sie also sicher, dass Sie, wenn Sie auf die Dokumente zurückgreifen, tatsächlich Version 4 oder frei von der Dokumentation
hier auswählen, um reibungslos fortzufahren.
Natürlich können Sie immer einen Blick auf Version 5 werfen und manuell versuchen, sich an den Code anzupassen,
wenn Sie möchten, aber für eine reibungslose Erfahrung liegt der Schwerpunkt natürlich auf React Native und nicht auf React Navigation.
Stellen Sie sicher, dass Sie Version 4 oder ein freies Jahr auswählen.
Dies ist nur eine kleine Randnotiz für den Fall, dass Sie sich über
den Unterschied zwischen den Dokumenten hier und dem, was Sie in diesem Kurs sehen,
wundern.
Hier später im Kurs werde ich ein ganzes Modul zur Reaktionsnavigation fünf haben und später werde ich Ihnen zeigen, wie
Sie Ihr Projekt konvertieren, um diese neueste Version zu verwenden.
Hatten Sie also das Beste aus beiden Welten und lernen Sie beide Arten des Einrichtens und Navigierens und reagieren
auf native Apps, denn sowohl für als auch für jede Zukunft, in der sie fünf Jahre und später ist, wird
es sehr wichtig sein, dies zu wissen.
Kopieren Sie also einfach diesen Befehl und stellen Sie sicher, dass wir neben der Installation
der Reaktionsnavigation, die natürlich das Kernpaket darstellt, auch diese Pakete in das Projekt installieren, indem wir
hier die Expo-Installation ausführen. Die Installation ist hier abgeschlossen. Ich kann meinen Expo-Server mit NPM start und neu starten
Wir können jetzt mit der Reaktionsnavigation beginnen.
Jetzt tauschen alle einen neuen Ordner in meinem Projekt und ich werde es Navigation nennen.
Dies ist nicht etwas, was Sie tun müssen, aber es kann Ihnen helfen, Ihren Code sauber zu halten, weil dort drin.
Ich werde eine neue Datei erstellen, alle erstellen meine Mahlzeiten Navigator Punkt J fallen.
Jetzt liegt dieser Dateiname ganz bei Ihnen.
Ich möchte nur darauf hinweisen, dass ich dort die Konfiguration für meine Navigation für meine Mahlzeiten-App einrichten werde,
die ich hier erstelle.
Deshalb ein Name wie dieser.
Und es ist der Essensnavigator-Jazz-Herbst, in dem ich meine Konfiguration für die Navigation einrichten möchte. Ich
möchte der Navigation mitteilen, welche Bibliothek wir installiert haben, welche verschiedenen Bildschirme wir haben, wie sie verbunden sind und
wie wir uns zwischen ihnen bewegen möchten.
Jetzt ist es einfacher, das einfach zu sehen, als nur darüber zu sprechen.
Lassen Sie uns daher im Essensnavigator mit dem Einrichten einer Navigation beginnen.