1 00:00:02,160 --> 00:00:05,140 Für dieses Modul und für diese App, 2 00:00:05,160 --> 00:00:11,310 die wir erstellen, finden Sie an dieser Vorlesung wieder ein Startprojekt, mit dem Sie beginnen 3 00:00:11,310 --> 00:00:15,480 können, oder Sie können natürlich selbst eine neue Expo-App erstellen. 4 00:00:15,480 --> 00:00:21,300 Dies ist die App, die ich angehängt habe, eine sehr einfache App mit Ich bin Ihre App, die wir kaum sehen können, was keine 5 00:00:21,330 --> 00:00:23,980 Rolle spielt, da wir diesen Text sowieso nicht durchhalten und nur 6 00:00:24,160 --> 00:00:26,370 diese eine App haben. js Datei. 7 00:00:26,430 --> 00:00:32,130 Nun, viele der Dinge, die ich in diesem Modul mache, werden Dinge sein, die Sie in den vorherigen Modulen gesehen haben, denn das 8 00:00:32,130 --> 00:00:33,660 ist offensichtlich die Kernidee hier. 9 00:00:33,660 --> 00:00:39,480 Wir werden üben, was wir bisher gelernt haben, und es wird einige neue Dinge oder Muster geben, die 10 00:00:39,480 --> 00:00:41,710 auch für Sie interessant sein könnten. 11 00:00:41,730 --> 00:00:47,160 Natürlich haben wir in dieser App, die ich in der letzten Vorlesung skizziert habe, ein paar Bildschirme, daher 12 00:00:47,160 --> 00:00:52,230 brauchen wir definitiv eine Navigation und daher füge ich einen Navigationsordner hinzu, damit ich meine Navigationskonfiguration dort 13 00:00:52,230 --> 00:00:54,380 speichern kann und das ist natürlich 14 00:00:54,420 --> 00:00:57,480 nur ein mögliches Setup, wie ich bereits erwähnt habe, Sie 15 00:00:57,480 --> 00:01:03,690 können mit jeder gewünschten Ordnerstruktur arbeiten und das funktioniert für Sie. Neben dem Navigationsordner möchte ich hier auch 16 00:01:03,690 --> 00:01:04,740 einen 17 00:01:04,740 --> 00:01:09,690 Bildschirmordner haben. In diesem Bildschirmordner möchte ich auch die Bildschirme speichern, 18 00:01:09,690 --> 00:01:15,660 zwischen denen wir navigieren können, und ich werde einen Komponentenordner für alle meine regulären 19 00:01:15,660 --> 00:01:18,460 Komponenten hinzufügen. Natürlich sind die Bildschirme 20 00:01:18,520 --> 00:01:24,450 auch Reagieren Komponenten, aber die normalen Komponenten, die ich hier meine, sind die Komponenten, 21 00:01:24,450 --> 00:01:30,720 die wir nicht direkt als Bildschirme laden, sondern die wir stattdessen in Bildschirme oder in 22 00:01:30,720 --> 00:01:37,500 andere Komponenten einbetten. Das haben wir also hier. Ich werde auch einen Konstantenordner hinzufügen, da ich hier 23 00:01:37,500 --> 00:01:43,860 wieder mit meinen Farbkonstanten arbeiten werde, damit ich meine vorgewählten Farben in der gesamten Anwendung verwenden kann. 24 00:01:43,880 --> 00:01:49,280 Jetzt gibt es eine Reihe verschiedener Einstiegsmöglichkeiten. Was ich zuerst in meinen Apps tun möchte, ist, 25 00:01:49,280 --> 00:01:51,020 dass ich mit den 26 00:01:51,020 --> 00:01:56,870 Bildschirmen beginne, auch wenn ich den Inhalt noch nicht allen hinzufüge, füge ich diesen allgemeinen hinzu Struktur, so 27 00:01:56,870 --> 00:02:01,570 dass ich immer sehen kann, woran ich noch arbeiten muss, welche Funktionen noch fehlen. 28 00:02:01,880 --> 00:02:04,980 Deshalb werde ich die Bildschirme hinzufügen, die ich in dieser App haben werde, 29 00:02:05,180 --> 00:02:09,890 und hier werde ich etwas tun, was ich vorher noch nicht getan habe und was völlig optional ist, aber 30 00:02:09,890 --> 00:02:12,120 ich werde meine Bildschirme in separaten Unterordnern organisieren. 31 00:02:12,170 --> 00:02:15,770 Ich werde einen Ordner mit meinen Shop-bezogenen Bildschirmen haben und 32 00:02:15,770 --> 00:02:20,930 da wir natürlich eine Shopping-App erstellen, sind alle Bildschirme so etwas wie Shop-bezogen, aber hier 33 00:02:20,930 --> 00:02:26,540 möchte ich die Bildschirme haben, die uns direkt beim Anzeigen unserer Produkte und beim Hinzufügen helfen 34 00:02:26,540 --> 00:02:27,120 in 35 00:02:27,530 --> 00:02:34,430 den Warenkorb und so weiter und dann möchte ich einen separaten Ordner haben und das ist mein Benutzerordner, könnte man 36 00:02:34,430 --> 00:02:36,400 sagen, dort möchte ich die 37 00:02:36,470 --> 00:02:40,370 benutzerbezogenen Bildschirme haben, so dass dies meine Benutzerprodukte und Verwaltungsprodukte wären. 38 00:02:40,440 --> 00:02:42,590 So werde ich das aufteilen, 39 00:02:42,590 --> 00:02:45,950 aber natürlich können Sie das organisieren, wie Sie wollen. 40 00:02:45,950 --> 00:02:52,670 Im Shop-Ordner hier möchte ich beispielsweise meinen Produktübersichtsbildschirm haben. Dies ist der Bildschirm, den wir sehen, wenn die App 41 00:02:52,760 --> 00:02:58,340 geladen wird, wo wir alle Produkte haben, mit denen wir arbeiten können, und wo wir dann 42 00:02:58,340 --> 00:03:04,880 ein Produkt auswählen oder direkt hinzufügen können zum Wagen. Wir benötigen daher auch einen Produktdetailbildschirm. Dies ist der Bildschirm, 43 00:03:04,880 --> 00:03:10,520 den wir sehen, wenn wir ein Produkt auswählen und mehr darüber erfahren möchten. Dann können wir darauf klicken 44 00:03:10,520 --> 00:03:16,940 oder darauf tippen und werden zu diesem Detailbildschirm weitergeleitet. Wir brauchen auch einen Warenkorbbildschirm, das ist nicht überraschend der Bildschirm, den 45 00:03:16,940 --> 00:03:22,430 wir sehen, wenn wir einen Artikel zum Warenkorb hinzufügen oder nicht, den wir dann sehen, den wir aber besuchen können, um 46 00:03:22,430 --> 00:03:23,000 den 47 00:03:23,000 --> 00:03:24,440 Artikel dort anzuzeigen. Das können 48 00:03:25,470 --> 00:03:30,600 wir also dort und ich tun. ' Außerdem wird ein Bestellbildschirm hinzugefügt, auf dem wir unsere Bestellungen anzeigen können. 49 00:03:30,600 --> 00:03:35,730 Jetzt könnten Sie übrigens argumentieren, dass der Warenkorbbildschirm und der Bestellbildschirm zum Benutzerordner gehören, da sie 50 00:03:35,730 --> 00:03:39,450 für den Benutzer exklusiv sind, jeder Benutzer seine eigenen Bestellungen und 51 00:03:39,450 --> 00:03:44,340 seinen eigenen Warenkorb hat und Sie daher in beide Richtungen gehen können. Ich glaube, sie 52 00:03:44,340 --> 00:03:47,970 sind ein bisschen mehr auf der Seite der Shop-Produkte, aber auch 53 00:03:47,970 --> 00:03:51,960 das liegt ganz bei Ihnen. Im Benutzerordner möchte 54 00:03:51,960 --> 00:03:58,980 ich den Bildschirm "Benutzerprodukte" haben. In diesem Bildschirm wird eine Liste aller Produkte angezeigt, 55 00:03:59,040 --> 00:04:06,570 die zu diesem Benutzer gehören, und der Bildschirm "Produkt bearbeiten", auf dem neue hinzugefügt werden Produkte 56 00:04:06,690 --> 00:04:08,710 oder zur Bearbeitung bestehender 57 00:04:08,730 --> 00:04:10,940 Produkte können wir diese wiederverwenden. 58 00:04:11,160 --> 00:04:13,490 Dies sind die Bildschirme, in denen wir 59 00:04:13,500 --> 00:04:20,280 in diesem Modul arbeiten werden, und wir werden sie jetzt nicht sofort mit Leben füllen. Wir werden stattdessen Schritt für Schritt daran 60 00:04:20,280 --> 00:04:20,990 arbeiten, aber 61 00:04:21,000 --> 00:04:23,090 es ist das, was wir brauchen. 62 00:04:23,220 --> 00:04:27,450 Jetzt gibt es natürlich noch einen weiteren Ordner, den wir bereits hinzufügen können, 63 00:04:27,450 --> 00:04:32,820 und das ist der Speicherordner, in dem wir unseren Redux-Speicher und unseren Redux-Status verwalten. Dies ist also 64 00:04:32,820 --> 00:04:38,070 unser Statusverwaltungssystem, mit dem ich arbeiten möchte und das wir natürlich brauchen, weil wir viele haben Bildschirme, 65 00:04:38,070 --> 00:04:44,280 die alle an den zugehörigen Daten arbeiten müssen, und daher müssen wir diese Daten, unsere Produkte und die im Warenkorb 66 00:04:44,280 --> 00:04:45,090 befindlichen Daten 67 00:04:45,090 --> 00:04:48,200 usw. auf globaler Ebene verwalten, und Redux ist dafür wirklich 68 00:04:48,240 --> 00:04:53,520 großartig, also werden wir das definitiv brauchen . Aus dem gleichen Grund müssen wir auch einige Pakete 69 00:04:53,550 --> 00:05:00,900 installieren, damit ich npm install --save und install Redux sowie React Redux ausführen kann. Wir werden auch React-Navigation brauchen, da wir 70 00:05:00,900 --> 00:05:07,480 natürlich wieder die Navigation hinzufügen werden, damit wir das schon da reinwerfen können. 71 00:05:07,500 --> 00:05:14,540 Ich werde auch bereits React-Navigations-Header-Schaltflächen hinzufügen, da ich hier Kopfzeilen-Schaltflächen hinzufügen werde und diese gut gestalteten und 72 00:05:14,550 --> 00:05:19,380 positionierten Schaltflächen haben möchte, ohne die gesamte Styling-Positionierung selbst vornehmen zu 73 00:05:19,380 --> 00:05:22,650 müssen, und das sollte es vorerst sein. 74 00:05:22,950 --> 00:05:28,770 Also werde ich alle diese Pakete bereits installieren, wir werden sie in diesem Modul 75 00:05:28,770 --> 00:05:36,570 benötigen und mit diesen installierten Paketen und diesen erstellten Basisdateien haben wir ein solides Basis-Setup, mit dem wir beginnen können. 76 00:05:36,580 --> 00:05:41,820 Neben diesen Paketen müssen wir jetzt auch zwei weitere Pakete 77 00:05:41,820 --> 00:05:49,050 mit Hilfe des Befehls expo install installieren. Dies ist der React-Native-Gesten-Handler. Installieren Sie also den 78 00:05:49,050 --> 00:05:55,800 React-Native-Gesten-Handler und auch das React-Native-Reanimated-Paket . Beide Pakete müssen auch mit dem 79 00:05:55,980 --> 00:05:58,800 Befehl expo install installiert werden. 80 00:05:58,860 --> 00:06:02,100 Jetzt geht es natürlich darum, das mit Leben zu füllen, und dort 81 00:06:02,190 --> 00:06:06,720 möchte ich mit dem ersten Bildschirm beginnen, auf dem wir tatsächlich sehen werden, welcher der Produktübersichtsbildschirm ist.