1 00:00:02,410 --> 00:00:07,070 Für dieses Modul finden Sie im Anhang wieder ein einfaches Startprojekt. 2 00:00:07,090 --> 00:00:09,640 Dort hast du die App. js Datei mit einer leeren 3 00:00:09,790 --> 00:00:11,680 Ansicht, so dass dort nicht zu viel passiert. 4 00:00:11,770 --> 00:00:16,870 Sie erhalten einen Konstantenordner mit einer Grundfarbe, die ich für Sie eingerichtet habe, und das war's. 5 00:00:16,870 --> 00:00:21,010 Abgesehen davon gibt es hier nichts Interessantes, es ist eine sehr einfache 6 00:00:21,010 --> 00:00:25,320 Anwendung, mit der wir jetzt diese Anwendung erstellen, die ich gerade skizziert habe. 7 00:00:25,420 --> 00:00:28,930 Jetzt können Sie natürlich die Grundlagen auf eigene Faust erstellen, 8 00:00:28,930 --> 00:00:34,870 also diese drei verschiedenen Bildschirme, die wir am Ende benötigen, oder vier verschiedene Bildschirme, einen für alle Orte, 9 00:00:34,870 --> 00:00:40,390 einen für die Ortsdetails, einen für die Erstellung eines neuen Platz und eine für die Vollbildkarte, die 10 00:00:40,390 --> 00:00:45,590 wir auch zeigen möchten, das können Sie absolut tun und das Basisskelett für diese Bildschirme 11 00:00:45,590 --> 00:00:51,100 selbst erstellen, auch die Grundnavigation einrichten, da dies natürlich alles sind, was wir bereits mehrfach gemacht haben 12 00:00:51,370 --> 00:00:52,600 in diesem Kurs. 13 00:00:52,750 --> 00:00:57,310 Es sind auch Dinge, mit denen ich in den nächsten Vorlesungen beginnen werde, falls Sie dort 14 00:00:57,310 --> 00:01:01,000 mitmachen oder Ihre Lösung mit meiner vergleichen möchten. Danach werden wir uns 15 00:01:01,090 --> 00:01:09,150 mit dem Fleisch dieses Moduls befassen und uns mit dem Hinzufügen nativer Gerätefunktionen befassen . Beginnen wir also mit den 16 00:01:09,210 --> 00:01:10,510 Grundlagen. 17 00:01:10,510 --> 00:01:17,080 Ich werde einen neuen Ordnerbildschirm mit den vier Bildschirmen hinzufügen, die ich haben möchte. Dies sind 18 00:01:17,080 --> 00:01:28,360 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 19 00:01:28,360 --> 00:01:33,770 map und ich werde sie mit Inhalten in diesem Modul füllen, aber dies 20 00:01:33,820 --> 00:01:36,970 sind die vier Grundbildschirme, die ich brauche. 21 00:01:36,970 --> 00:01:43,460 Ich werde auch einen Navigationsordner hinzufügen, damit wir dort die Navigation einrichten können, und hier 22 00:01:43,470 --> 00:01:51,030 werde ich meinen PlacesNavigator einrichten. js Datei. In dem von mir bereitgestellten Startprojekt sind 23 00:01:51,450 --> 00:01:52,920 die React-Navigation und 24 00:01:52,920 --> 00:01:56,720 alle ihre Abhängigkeiten bereits installiert. Wenn Sie diese verwenden, müssen Sie 25 00:01:58,260 --> 00:02:03,480 sie nicht manuell installieren. Andernfalls stellen Sie sicher, dass Sie Ihr eigenes Startprojekt verwenden Installieren Sie 26 00:02:03,480 --> 00:02:09,660 React Navigation mit npm. Installieren Sie React Navigation und stellen Sie sicher, dass Sie diese zusätzlichen Abhängigkeiten hier installieren, 27 00:02:09,660 --> 00:02:12,280 um sicherzustellen, dass React Navigation mit expo funktioniert. 28 00:02:12,330 --> 00:02:19,290 Wenn dies installiert ist, können wir jetzt natürlich die Navigation hier im Ortsnavigator einrichten und dafür importiere ich 29 00:02:19,380 --> 00:02:24,150 hier aus der React-Navigation und was ich importieren werde, ist natürlich die 30 00:02:26,730 --> 00:02:31,020 Funktion zum Erstellen des Stapelnavigators. Erstellen Sie also den Stapelnavigator 31 00:02:31,020 --> 00:02:37,110 und Erstellen Sie auch einen App-Container, den wir ebenfalls ausführen müssen, da wir beides tun müssen. 32 00:02:37,110 --> 00:02:41,580 Erstellen Sie einen Stack-Navigator und richten Sie den App-Container anschließend ein. 33 00:02:41,580 --> 00:02:46,830 Jetzt müssen wir auch die Bildschirme importieren, mit denen wir arbeiten möchten, und das wäre der Ortslistenbildschirm, den ich 34 00:02:47,070 --> 00:02:53,640 aus dem Bildschirmordner importieren werde, und dort ist es der Ortslistenbildschirm. Wir benötigen natürlich auch den Ortsdetailbildschirm, 35 00:02:53,640 --> 00:02:59,910 den Ortsdetailbildschirm, der aus dem Ortsdetailbildschirm importiert wird, und natürlich auch 36 00:02:59,910 --> 00:03:02,850 die beiden anderen Bildschirme. 37 00:03:02,850 --> 00:03:12,800 Wir haben also den neuen Ortsbildschirm von Bildschirmen, den neuen Ortsbildschirm und nicht zuletzt müssen wir unseren Kartenbildschirm hier 38 00:03:12,830 --> 00:03:18,770 aus dem Bildschirmordner importieren, und dann wäre das der Kartenbildschirm. 39 00:03:18,770 --> 00:03:26,800 Jetzt können wir hier unseren Stapelnavigator einrichten und diesen Ortsnavigator in einer Konstanten speichern. Wie 40 00:03:26,990 --> 00:03:31,440 Sie auch erfahren haben, ordnen wir unseren Bildschirmen 41 00:03:31,550 --> 00:03:38,720 jetzt Bezeichner zu, sodass wir möglicherweise den Ortsbezeichner dem Ortslistenbildschirm zugeordnet haben Wir 42 00:03:38,840 --> 00:03:41,180 haben die Ortsdetailkennung 43 00:03:41,180 --> 00:03:49,300 dem Ortsdetailbildschirm zugeordnet, wir haben auch die neue Ortskennung dem neuen Ortsbildschirm zugeordnet und nicht 44 00:03:49,330 --> 00:03:57,040 zuletzt die Karte möglicherweise dem Kartenbildschirm zugeordnet. Und damit können wir hier einige Standardnavigationsoptionen einrichten, daher werde 45 00:03:57,130 --> 00:04:02,680 ich ein zweites Argument übergeben und das Einrichten ist natürlich völlig optional, aber ich werde 46 00:04:02,680 --> 00:04:09,970 daher jedem Bildschirm Standardnavigationsoptionen hinzufügen, und ich möchte meine definieren Header-Stil hier und stellen Sie sicher, dass wir dort eine 47 00:04:09,970 --> 00:04:14,010 Hintergrundfarbe verwenden, je nachdem, ob wir auf Android laufen oder nicht. 48 00:04:14,140 --> 00:04:21,880 Daher werde ich diese Plattform-API-Sache aus React Native importieren und ich werde auch meine Farbe benötigen, also werde ich 49 00:04:21,910 --> 00:04:30,790 auch Farben aus Konstanten / Farben importieren. Dies ist auch erforderlich, da wir damit jetzt überprüfen können, ob das Plattform-Betriebssystem Android ist 50 00:04:30,790 --> 00:04:37,120 Wenn dies der Fall ist, können wir sicherstellen, dass die Hintergrundfarbe des Headers unsere Primärfarbe 51 00:04:37,120 --> 00:04:39,400 ist. Andernfalls werde ich 52 00:04:39,580 --> 00:04:46,600 keine Farbe festlegen. Ich möchte das transparente Standard-Aussehen verwenden, das iOS verwendet, und hier auch eine Header-Tönungsfarbe 53 00:04:46,600 --> 00:04:53,080 einrichten Der Text dort wird erneut nach der Plattform gesucht. Wenn die Plattform Android ist, da 54 00:04:53,080 --> 00:04:59,560 wir einen soliden Hintergrund haben, setze ich die Farbtonfarbe auf Weiß. Für iOS mache ich das 55 00:04:59,590 --> 00:05:06,520 Gegenteil. Dort setze ich sie auf meine Primärfarbe. Nun, da es hier ist, habe ich keine benutzerdefinierten Schriftarten in diesem 56 00:05:06,520 --> 00:05:12,790 Projekt. Natürlich können Sie einige hinzufügen, wenn Sie möchten. Mit dieser Einstellung können wir unseren App-Container exportieren, den 57 00:05:12,790 --> 00:05:21,230 wir daher mit create app container erstellen und hier den Ortsnavigator übergeben müssen. Das ist natürlich die Navigation in 58 00:05:21,230 --> 00:05:24,620 der App. 59 00:05:24,620 --> 00:05:24,620 js Datei können wir jetzt verwenden. 60 00:05:24,620 --> 00:05:32,200 Hier sollten wir also den Ortsnavigator aus dem Navigationsordner importieren, Ortsnavigator, wir brauchen den Ansichtsimport hier daher 61 00:05:32,240 --> 00:05:39,920 nicht mehr und können einfach den Ortsnavigator zurückgeben. Da ich keine benutzerdefinierten Schriftarten lade, muss ich 62 00:05:39,920 --> 00:05:44,540 diese App auch nicht laden, was wir in früheren oder anderen 63 00:05:44,540 --> 00:05:49,610 Modulen getan haben. Hier kann ich dies einfach von Anfang an zurückgeben. 64 00:05:51,500 --> 00:05:58,660 In diesen Bildschirmen hier, im Bildschirm mit der Ortsliste, importiere ich React from React, importiere einige Dinge aus React 65 00:05:58,700 --> 00:06:01,190 Native, wahrscheinlich eine Ansicht, einen Text 66 00:06:01,220 --> 00:06:02,070 und 67 00:06:02,120 --> 00:06:08,570 ein Stylesheet, und dann können wir sehen, ob wir etwas anderes benötigen Später von React Native und 68 00:06:08,600 --> 00:06:15,740 dann hier die Konstante einrichten, ist der Ortslistenbildschirm eine normale React-Komponente, die Requisiten empfängt und deren Ende einige 69 00:06:15,740 --> 00:06:19,550 Inhalte zurückgibt. Hier gebe ich nur eine Ansicht mit einem 70 00:06:19,550 --> 00:06:24,330 Text des Ortslistenbildschirms zurück, also nur einige Dummy-Inhalt für jetzt und haben 71 00:06:24,590 --> 00:06:30,230 auch das Stylesheet hier mit Stylesheet eingerichtet. Erstellen Sie den Bildschirm mit 72 00:06:31,190 --> 00:06:34,800 der Ortsliste und exportieren Sie ihn schließlich. 73 00:06:34,800 --> 00:06:37,420 Und dies wird das Grundgerüst sein, das wir für jede Ansicht 74 00:06:37,430 --> 00:06:40,880 verwenden können, also werde ich es in jede Ansicht einfügen und diesen Namen hier einfach anpassen. 75 00:06:40,880 --> 00:06:48,250 Hier haben wir also den Ortsdetailbildschirm, den ich verwenden möchte, und kopieren ihn dann auch in den neuen Ortsbildschirm. Ersetzen Sie 76 00:06:48,850 --> 00:06:52,720 diesen Namen hier an allen drei Stellen und lassen Sie 77 00:06:52,720 --> 00:06:58,300 ihn nicht zuletzt auch auf dem Kartenbildschirm ablegen, um ihn hier als zu haben Nun, 78 00:06:58,300 --> 00:07:02,650 und dann werden wir natürlich den eigentlichen Inhalt in diesem Modul hinzufügen. 79 00:07:02,800 --> 00:07:05,530 Das sind also die erstellten Bildschirme. Wenn wir 80 00:07:05,530 --> 00:07:12,190 das jetzt speichern und Sie dies mit npm start oder mit expo start ausführen und es auf Ihrem bevorzugten 81 00:07:12,220 --> 00:07:18,660 Emulator oder Ihren Emulatoren ausführen. Sobald dieses Gebäude fertig ist, sollten wir am Ende den Bildschirm mit der 82 00:07:18,990 --> 00:07:21,020 Ortsliste sehen, wie z Dies. 83 00:07:21,120 --> 00:07:26,790 Natürlich haben wir hier keinen Header-Titel, also stellen wir sicher, dass wir einen festlegen, 84 00:07:27,180 --> 00:07:34,830 auch unter Android, indem wir zum Ortslistenbildschirm gehen. Dort können wir Navigationsoptionen für den Ortslistenbildschirm hinzufügen und diesen auf a 85 00:07:34,830 --> 00:07:42,690 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 86 00:07:42,690 --> 00:07:47,840 hier auf dem Bildschirm mit der Ortsliste, sobald dies neu geladen wird. 87 00:07:48,030 --> 00:07:55,260 Das ist also die grundlegende Bildschirmeinstellung, die wir hier für dieses Modul benötigen. Bevor wir uns eingehender mit den Inhalten der 88 00:07:55,260 --> 00:07:58,530 anderen Bildschirme befassen, stellen wir sicher, 89 00:07:58,650 --> 00:08:04,020 dass wir auch hier in der Kopfzeile eine Plus-Schaltfläche haben, die uns 90 00:08:04,020 --> 00:08:10,770 zum neuen Ortsbildschirm führt, da wir dann mit dem Tippen beginnen können native Gerätefunktionen und 91 00:08:10,770 --> 00:08:13,010 mit Hinzufügen von Orten. 92 00:08:13,090 --> 00:08:20,200 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 93 00:08:20,200 --> 00:08:27,040 npm install --save installieren und das ist das Paket mit den Header-Schaltflächen für die Reaktionsnavigation, das wir einige Male verwendet 94 00:08:27,040 --> 00:08:32,170 haben Während dieses Kurses werde ich es genauso verwenden, wie ich es im Rest 95 00:08:32,170 --> 00:08:33,790 des Kurses verwendet habe. 96 00:08:33,880 --> 00:08:39,880 Also erstelle ich einen Komponentenordner, in dem ich meine 97 00:08:40,000 --> 00:08:51,020 eigene Header-Schaltflächenkomponente einrichten kann, um diese vorkonfigurierte wiederverwendbare Schaltflächenkomponente zu erhalten, und in diese Komponente importiere ich 98 00:08:51,080 --> 00:09:02,460 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 99 00:09:02,510 --> 00:09:07,110 installieren möchten, falls hier mit npm install --save Fehler 100 00:09:07,110 --> 00:09:18,840 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 101 00:09:18,840 --> 00:09:24,870 für Komponenten, die Requisiten empfängt, die etwas jsx zurückgeben. Hier möchte ich 102 00:09:24,880 --> 00:09:31,260 die Header-Schaltfläche zurückgeben, die wir importieren, aber jetzt konfigurieren wir sie einfach gemäß 103 00:09:31,260 --> 00:09:32,750 unseren Anforderungen. 104 00:09:33,000 --> 00:09:39,240 Zuerst, indem wir alle Requisiten an sie weiterleiten und dann die Icon-Komponente auf Ionicon setzen, damit 105 00:09:39,270 --> 00:09:40,480 dies verwendet 106 00:09:40,590 --> 00:09:47,250 wird, setzen Sie die Icon-Größe hier vielleicht auf 23, weil ich denke, dass das bisher recht gut funktioniert 107 00:09:47,250 --> 00:09:48,870 hat und setzen Sie 108 00:09:48,870 --> 00:09:57,240 die Farbe auf und jetzt auf I Ich brauche einen weiteren Import, ich muss die Plattform von React Native importieren, da ich 109 00:09:57,600 --> 00:09:59,940 jetzt die Plattform hier überprüfen möchte 110 00:10:01,560 --> 00:10:07,470 und wenn die Plattform Android ist, haben wir einen soliden Hintergrund, also möchte ich Weiß 111 00:10:07,800 --> 00:10:10,680 als verwenden Symbolfarbe, sonst verwende ich meine Primärfarbe. 112 00:10:10,740 --> 00:10:16,080 Jetzt müssen Sie nur noch diese benutzerdefinierte Kopfzeile hier exportieren, und jetzt können wir sie 113 00:10:16,080 --> 00:10:20,600 im Bildschirm mit der Ortsliste verwenden. Dort importiere ich auch 114 00:10:20,610 --> 00:10:29,280 nach wie vor zwei weitere Pakete aus React-Navigation-Header-Buttons, zwei weitere Dinge aus diesem Paket und das wären meine 115 00:10:29,280 --> 00:10:36,480 Header-Buttons und Item, beide müssen importiert werden und zusätzlich können wir auch unsere importieren eigene 116 00:10:36,480 --> 00:10:42,810 benutzerdefinierte Header-Schaltfläche jetzt aus dem Komponentenordner und dort aus dieser Header-Schaltflächendatei, in 117 00:10:42,810 --> 00:10:48,060 der wir gerade gearbeitet haben. Mit diesem Import können wir unsere 118 00:10:48,060 --> 00:10:53,880 Navigationsoptionen hier so ändern, dass sie dynamisch sind. Dort haben wir diese Funktion, die uns die 119 00:10:54,270 --> 00:11:00,750 Navigationsdaten liefert und schließlich dieses Konfigurationsobjekt zurückgibt, da wir dann die Schaltfläche auch an eine Funktion binden können, 120 00:11:00,750 --> 00:11:07,380 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 121 00:11:07,380 --> 00:11:12,540 jetzt natürlich auch ein Muster, das wir in diesem Kurs viele Male gemacht haben. Wir 122 00:11:12,540 --> 00:11:19,560 haben die Header-Schaltflächen wie folgt hinzugefügt und das Element darin. Auf der Kopfzeilenschaltflächenkomponente können wir die Kopfzeilenschaltflächenkomponente festlegen 123 00:11:19,590 --> 00:11:27,330 und hier auf unsere benutzerdefinierte Kopfzeilenschaltflächenkomponente zeigen. Auf das Element legen wir jetzt einen Titel fest, z. B. Platz 124 00:11:27,330 --> 00:11:31,930 hinzufügen, und wir legen hier einen Symbolnamen fest, der von der 125 00:11:32,010 --> 00:11:39,870 Plattform abhängt Daher werde ich diese Plattform-API hier tatsächlich von React Native importieren und wir können jetzt überprüfen, ob 126 00:11:39,960 --> 00:11:48,090 das Plattform-Betriebssystem Android ist. Wenn dies der Fall ist, möchte ich dies auf md add setzen, andernfalls auf ios add, 127 00:11:48,240 --> 00:11:52,560 wodurch eine Plus-Schaltfläche für das hinzugefügt wird spezifische Plattform, also folgen 128 00:11:52,560 --> 00:11:58,290 Sie dem spezifischen Aussehen dieser Plattform. Wir müssen auch die onPress-Funktion 129 00:11:58,290 --> 00:12:05,160 hinzufügen. Wenn wir darauf tippen, möchte ich hier einfach mit der Navigationsmethode navigieren. Deshalb müssen 130 00:12:05,160 --> 00:12:11,310 wir diese dynamische Funktion hier haben, damit wir Zugriff auf Navigationsdaten und dann 131 00:12:11,430 --> 00:12:19,990 Navigation erhalten. Zu neuem Ort navigieren und neuer Ort hier ist natürlich meine Kennung im Ortsnavigator dieses neuen Ortsbildschirms. 132 00:12:20,040 --> 00:12:24,780 Damit haben wir eine Möglichkeit, zu diesem Bildschirm zu gelangen, und wenn wir dies speichern, sollten wir 133 00:12:24,780 --> 00:12:25,960 dies tun können. 134 00:12:26,100 --> 00:12:32,800 Offensichtlich erhalte ich eine Fehlermeldung, weil in meiner Header-Button-Komponente, da ich dort eine React-Komponente habe, das 135 00:12:32,920 --> 00:12:38,680 Importieren von React aus React nicht die schlechteste Idee ist. Lassen Sie uns 136 00:12:38,680 --> 00:12:45,290 das hier in der Header-Button-Komponente schnell beheben, aber jetzt damit Beim erneuten Laden haben wir diese 137 00:12:45,290 --> 00:12:51,760 Plus-Schaltfläche und können zum neuen Ortsbildschirm, zum neuen Ortsbildschirm gehen, natürlich auch hier auf Android. 138 00:12:51,980 --> 00:12:57,680 Jetzt können wir auf diesem neuen Ortsbildschirm auch Navigationsoptionen hinzufügen, um einen Titel festzulegen, neue 139 00:12:58,070 --> 00:13:04,010 Ortsbildschirm-Navigationsoptionen, und es für den Moment auf ein statisches Objekt setzen, da wir dies momentan nicht als 140 00:13:04,010 --> 00:13:11,210 Funktion benötigen Wir brauchen keinen Zugriff auf die Navigationsdaten, wir müssen nur den Header-Titel festlegen, um Platz hinzuzufügen, und wenn 141 00:13:11,930 --> 00:13:17,340 wir ihn speichern, sehen wir diesen Titel natürlich im Header, wenn wir dorthin gehen. 142 00:13:17,540 --> 00:13:20,440 Dies ist also diese Grundeinstellung hier. Jetzt können wir 143 00:13:20,570 --> 00:13:25,430 an diesem Bildschirm zum Hinzufügen von Orten arbeiten, um sicherzustellen, dass wir einen Ort hinzufügen können.