Für dieses Modul finden Sie im Anhang wieder ein einfaches Startprojekt.
Dort hast du die App. js Datei mit einer leeren
Ansicht, so dass dort nicht zu viel passiert.
Sie erhalten einen Konstantenordner mit einer Grundfarbe, die ich für Sie eingerichtet habe, und das war's.
Abgesehen davon gibt es hier nichts Interessantes, es ist eine sehr einfache
Anwendung, mit der wir jetzt diese Anwendung erstellen, die ich gerade skizziert habe.
Jetzt können Sie natürlich die Grundlagen auf eigene Faust erstellen,
also diese drei verschiedenen Bildschirme, die wir am Ende benötigen, oder vier verschiedene Bildschirme, einen für alle Orte,
einen für die Ortsdetails, einen für die Erstellung eines neuen Platz und eine für die Vollbildkarte, die
wir auch zeigen möchten, das können Sie absolut tun und das Basisskelett für diese Bildschirme
selbst erstellen, auch die Grundnavigation einrichten, da dies natürlich alles sind, was wir bereits mehrfach gemacht haben
in diesem Kurs.
Es sind auch Dinge, mit denen ich in den nächsten Vorlesungen beginnen werde, falls Sie dort
mitmachen oder Ihre Lösung mit meiner vergleichen möchten. Danach werden wir uns
mit dem Fleisch dieses Moduls befassen und uns mit dem Hinzufügen nativer Gerätefunktionen befassen . Beginnen wir also mit den
Grundlagen.
Ich werde einen neuen Ordnerbildschirm mit den vier Bildschirmen hinzufügen, die ich haben möchte. Dies sind
die Bildschirmdatei für die Ortsliste, die Bildschirmdatei für den Ortsdetail, die neue Bildschirmdatei für den Ort und auch der Kartenbildschirm, auf dem wir dann diesen Vollbildmodus sehen können
map und ich werde sie mit Inhalten in diesem Modul füllen, aber dies
sind die vier Grundbildschirme, die ich brauche.
Ich werde auch einen Navigationsordner hinzufügen, damit wir dort die Navigation einrichten können, und hier
werde ich meinen PlacesNavigator einrichten. js Datei. In dem von mir bereitgestellten Startprojekt sind
die React-Navigation und
alle ihre Abhängigkeiten bereits installiert. Wenn Sie diese verwenden, müssen Sie
sie nicht manuell installieren. Andernfalls stellen Sie sicher, dass Sie Ihr eigenes Startprojekt verwenden Installieren Sie
React Navigation mit npm. Installieren Sie React Navigation und stellen Sie sicher, dass Sie diese zusätzlichen Abhängigkeiten hier installieren,
um sicherzustellen, dass React Navigation mit expo funktioniert.
Wenn dies installiert ist, können wir jetzt natürlich die Navigation hier im Ortsnavigator einrichten und dafür importiere ich
hier aus der React-Navigation und was ich importieren werde, ist natürlich die
Funktion zum Erstellen des Stapelnavigators. Erstellen Sie also den Stapelnavigator
und Erstellen Sie auch einen App-Container, den wir ebenfalls ausführen müssen, da wir beides tun müssen.
Erstellen Sie einen Stack-Navigator und richten Sie den App-Container anschließend ein.
Jetzt müssen wir auch die Bildschirme importieren, mit denen wir arbeiten möchten, und das wäre der Ortslistenbildschirm, den ich
aus dem Bildschirmordner importieren werde, und dort ist es der Ortslistenbildschirm. Wir benötigen natürlich auch den Ortsdetailbildschirm,
den Ortsdetailbildschirm, der aus dem Ortsdetailbildschirm importiert wird, und natürlich auch
die beiden anderen Bildschirme.
Wir haben also den neuen Ortsbildschirm von Bildschirmen, den neuen Ortsbildschirm und nicht zuletzt müssen wir unseren Kartenbildschirm hier
aus dem Bildschirmordner importieren, und dann wäre das der Kartenbildschirm.
Jetzt können wir hier unseren Stapelnavigator einrichten und diesen Ortsnavigator in einer Konstanten speichern. Wie
Sie auch erfahren haben, ordnen wir unseren Bildschirmen
jetzt Bezeichner zu, sodass wir möglicherweise den Ortsbezeichner dem Ortslistenbildschirm zugeordnet haben Wir
haben die Ortsdetailkennung
dem Ortsdetailbildschirm zugeordnet, wir haben auch die neue Ortskennung dem neuen Ortsbildschirm zugeordnet und nicht
zuletzt die Karte möglicherweise dem Kartenbildschirm zugeordnet. Und damit können wir hier einige Standardnavigationsoptionen einrichten, daher werde
ich ein zweites Argument übergeben und das Einrichten ist natürlich völlig optional, aber ich werde
daher jedem Bildschirm Standardnavigationsoptionen hinzufügen, und ich möchte meine definieren Header-Stil hier und stellen Sie sicher, dass wir dort eine
Hintergrundfarbe verwenden, je nachdem, ob wir auf Android laufen oder nicht.
Daher werde ich diese Plattform-API-Sache aus React Native importieren und ich werde auch meine Farbe benötigen, also werde ich
auch Farben aus Konstanten / Farben importieren. Dies ist auch erforderlich, da wir damit jetzt überprüfen können, ob das Plattform-Betriebssystem Android ist
Wenn dies der Fall ist, können wir sicherstellen, dass die Hintergrundfarbe des Headers unsere Primärfarbe
ist. Andernfalls werde ich
keine Farbe festlegen. Ich möchte das transparente Standard-Aussehen verwenden, das iOS verwendet, und hier auch eine Header-Tönungsfarbe
einrichten Der Text dort wird erneut nach der Plattform gesucht. Wenn die Plattform Android ist, da
wir einen soliden Hintergrund haben, setze ich die Farbtonfarbe auf Weiß. Für iOS mache ich das
Gegenteil. Dort setze ich sie auf meine Primärfarbe. Nun, da es hier ist, habe ich keine benutzerdefinierten Schriftarten in diesem
Projekt. Natürlich können Sie einige hinzufügen, wenn Sie möchten. Mit dieser Einstellung können wir unseren App-Container exportieren, den
wir daher mit create app container erstellen und hier den Ortsnavigator übergeben müssen. Das ist natürlich die Navigation in
der App.
js Datei können wir jetzt verwenden.
Hier sollten wir also den Ortsnavigator aus dem Navigationsordner importieren, Ortsnavigator, wir brauchen den Ansichtsimport hier daher
nicht mehr und können einfach den Ortsnavigator zurückgeben. Da ich keine benutzerdefinierten Schriftarten lade, muss ich
diese App auch nicht laden, was wir in früheren oder anderen
Modulen getan haben. Hier kann ich dies einfach von Anfang an zurückgeben.
In diesen Bildschirmen hier, im Bildschirm mit der Ortsliste, importiere ich React from React, importiere einige Dinge aus React
Native, wahrscheinlich eine Ansicht, einen Text
und
ein Stylesheet, und dann können wir sehen, ob wir etwas anderes benötigen Später von React Native und
dann hier die Konstante einrichten, ist der Ortslistenbildschirm eine normale React-Komponente, die Requisiten empfängt und deren Ende einige
Inhalte zurückgibt. Hier gebe ich nur eine Ansicht mit einem
Text des Ortslistenbildschirms zurück, also nur einige Dummy-Inhalt für jetzt und haben
auch das Stylesheet hier mit Stylesheet eingerichtet. Erstellen Sie den Bildschirm mit
der Ortsliste und exportieren Sie ihn schließlich.
Und dies wird das Grundgerüst sein, das wir für jede Ansicht
verwenden können, also werde ich es in jede Ansicht einfügen und diesen Namen hier einfach anpassen.
Hier haben wir also den Ortsdetailbildschirm, den ich verwenden möchte, und kopieren ihn dann auch in den neuen Ortsbildschirm. Ersetzen Sie
diesen Namen hier an allen drei Stellen und lassen Sie
ihn nicht zuletzt auch auf dem Kartenbildschirm ablegen, um ihn hier als zu haben Nun,
und dann werden wir natürlich den eigentlichen Inhalt in diesem Modul hinzufügen.
Das sind also die erstellten Bildschirme. Wenn wir
das jetzt speichern und Sie dies mit npm start oder mit expo start ausführen und es auf Ihrem bevorzugten
Emulator oder Ihren Emulatoren ausführen. Sobald dieses Gebäude fertig ist, sollten wir am Ende den Bildschirm mit der
Ortsliste sehen, wie z Dies.
Natürlich haben wir hier keinen Header-Titel, also stellen wir sicher, dass wir einen festlegen,
auch unter Android, indem wir zum Ortslistenbildschirm gehen. Dort können wir Navigationsoptionen für den Ortslistenbildschirm hinzufügen und diesen auf a
setzen statisches Objekt hier, wo wir einen Header-Titel aller Orte oder ähnliches hinzufügen können, und damit sehen wir diesen Titel natürlich
hier auf dem Bildschirm mit der Ortsliste, sobald dies neu geladen wird.
Das ist also die grundlegende Bildschirmeinstellung, die wir hier für dieses Modul benötigen. Bevor wir uns eingehender mit den Inhalten der
anderen Bildschirme befassen, stellen wir sicher,
dass wir auch hier in der Kopfzeile eine Plus-Schaltfläche haben, die uns
zum neuen Ortsbildschirm führt, da wir dann mit dem Tippen beginnen können native Gerätefunktionen und
mit Hinzufügen von Orten.
Jetzt wissen Sie natürlich, wie Sie dem Header Ihres Navigators eine Schaltfläche hinzufügen können. Sie müssen lediglich ein neues Paket mit
npm install --save installieren und das ist das Paket mit den Header-Schaltflächen für die Reaktionsnavigation, das wir einige Male verwendet
haben Während dieses Kurses werde ich es genauso verwenden, wie ich es im Rest
des Kurses verwendet habe.
Also erstelle ich einen Komponentenordner, in dem ich meine
eigene Header-Schaltflächenkomponente einrichten kann, um diese vorkonfigurierte wiederverwendbare Schaltflächenkomponente zu erhalten, und in diese Komponente importiere ich
die Header-Schaltfläche aus diesem soeben installierten React-Navigations-Header-Schaltflächenpaket. Importieren Sie Ionicons aus expo / vector-icons, einem Paket, das Sie möglicherweise
installieren möchten, falls hier mit npm install --save Fehler
auftreten, und importieren Sie auch die Farbkonstante aus dem Konstantenordner und dort aus der Farbdatei und dann hier Ich habe eine reguläre benutzerdefinierte Header-Schaltfläche
für Komponenten, die Requisiten empfängt, die etwas jsx zurückgeben. Hier möchte ich
die Header-Schaltfläche zurückgeben, die wir importieren, aber jetzt konfigurieren wir sie einfach gemäß
unseren Anforderungen.
Zuerst, indem wir alle Requisiten an sie weiterleiten und dann die Icon-Komponente auf Ionicon setzen, damit
dies verwendet
wird, setzen Sie die Icon-Größe hier vielleicht auf 23, weil ich denke, dass das bisher recht gut funktioniert
hat und setzen Sie
die Farbe auf und jetzt auf I Ich brauche einen weiteren Import, ich muss die Plattform von React Native importieren, da ich
jetzt die Plattform hier überprüfen möchte
und wenn die Plattform Android ist, haben wir einen soliden Hintergrund, also möchte ich Weiß
als verwenden Symbolfarbe, sonst verwende ich meine Primärfarbe.
Jetzt müssen Sie nur noch diese benutzerdefinierte Kopfzeile hier exportieren, und jetzt können wir sie
im Bildschirm mit der Ortsliste verwenden. Dort importiere ich auch
nach wie vor zwei weitere Pakete aus React-Navigation-Header-Buttons, zwei weitere Dinge aus diesem Paket und das wären meine
Header-Buttons und Item, beide müssen importiert werden und zusätzlich können wir auch unsere importieren eigene
benutzerdefinierte Header-Schaltfläche jetzt aus dem Komponentenordner und dort aus dieser Header-Schaltflächendatei, in
der wir gerade gearbeitet haben. Mit diesem Import können wir unsere
Navigationsoptionen hier so ändern, dass sie dynamisch sind. Dort haben wir diese Funktion, die uns die
Navigationsdaten liefert und schließlich dieses Konfigurationsobjekt zurückgibt, da wir dann die Schaltfläche auch an eine Funktion binden können,
die Wir erhalten über Routenparameter, weil ich hier das Header-Recht hinzufügen möchte, um meine Header-Schaltflächen hinzuzufügen, und das ist
jetzt natürlich auch ein Muster, das wir in diesem Kurs viele Male gemacht haben. Wir
haben die Header-Schaltflächen wie folgt hinzugefügt und das Element darin. Auf der Kopfzeilenschaltflächenkomponente können wir die Kopfzeilenschaltflächenkomponente festlegen
und hier auf unsere benutzerdefinierte Kopfzeilenschaltflächenkomponente zeigen. Auf das Element legen wir jetzt einen Titel fest, z. B. Platz
hinzufügen, und wir legen hier einen Symbolnamen fest, der von der
Plattform abhängt Daher werde ich diese Plattform-API hier tatsächlich von React Native importieren und wir können jetzt überprüfen, ob
das Plattform-Betriebssystem Android ist. Wenn dies der Fall ist, möchte ich dies auf md add setzen, andernfalls auf ios add,
wodurch eine Plus-Schaltfläche für das hinzugefügt wird spezifische Plattform, also folgen
Sie dem spezifischen Aussehen dieser Plattform. Wir müssen auch die onPress-Funktion
hinzufügen. Wenn wir darauf tippen, möchte ich hier einfach mit der Navigationsmethode navigieren. Deshalb müssen
wir diese dynamische Funktion hier haben, damit wir Zugriff auf Navigationsdaten und dann
Navigation erhalten. Zu neuem Ort navigieren und neuer Ort hier ist natürlich meine Kennung im Ortsnavigator dieses neuen Ortsbildschirms.
Damit haben wir eine Möglichkeit, zu diesem Bildschirm zu gelangen, und wenn wir dies speichern, sollten wir
dies tun können.
Offensichtlich erhalte ich eine Fehlermeldung, weil in meiner Header-Button-Komponente, da ich dort eine React-Komponente habe, das
Importieren von React aus React nicht die schlechteste Idee ist. Lassen Sie uns
das hier in der Header-Button-Komponente schnell beheben, aber jetzt damit Beim erneuten Laden haben wir diese
Plus-Schaltfläche und können zum neuen Ortsbildschirm, zum neuen Ortsbildschirm gehen, natürlich auch hier auf Android.
Jetzt können wir auf diesem neuen Ortsbildschirm auch Navigationsoptionen hinzufügen, um einen Titel festzulegen, neue
Ortsbildschirm-Navigationsoptionen, und es für den Moment auf ein statisches Objekt setzen, da wir dies momentan nicht als
Funktion benötigen Wir brauchen keinen Zugriff auf die Navigationsdaten, wir müssen nur den Header-Titel festlegen, um Platz hinzuzufügen, und wenn
wir ihn speichern, sehen wir diesen Titel natürlich im Header, wenn wir dorthin gehen.
Dies ist also diese Grundeinstellung hier. Jetzt können wir
an diesem Bildschirm zum Hinzufügen von Orten arbeiten, um sicherzustellen, dass wir einen Ort hinzufügen können.