Für dieses Modul und für diese App,
die wir erstellen, finden Sie an dieser Vorlesung wieder ein Startprojekt, mit dem Sie beginnen
können, oder Sie können natürlich selbst eine neue Expo-App erstellen.
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
Rolle spielt, da wir diesen Text sowieso nicht durchhalten und nur
diese eine App haben. js Datei.
Nun, viele der Dinge, die ich in diesem Modul mache, werden Dinge sein, die Sie in den vorherigen Modulen gesehen haben, denn das
ist offensichtlich die Kernidee hier.
Wir werden üben, was wir bisher gelernt haben, und es wird einige neue Dinge oder Muster geben, die
auch für Sie interessant sein könnten.
Natürlich haben wir in dieser App, die ich in der letzten Vorlesung skizziert habe, ein paar Bildschirme, daher
brauchen wir definitiv eine Navigation und daher füge ich einen Navigationsordner hinzu, damit ich meine Navigationskonfiguration dort
speichern kann und das ist natürlich
nur ein mögliches Setup, wie ich bereits erwähnt habe, Sie
können mit jeder gewünschten Ordnerstruktur arbeiten und das funktioniert für Sie. Neben dem Navigationsordner möchte ich hier auch
einen
Bildschirmordner haben. In diesem Bildschirmordner möchte ich auch die Bildschirme speichern,
zwischen denen wir navigieren können, und ich werde einen Komponentenordner für alle meine regulären
Komponenten hinzufügen. Natürlich sind die Bildschirme
auch Reagieren Komponenten, aber die normalen Komponenten, die ich hier meine, sind die Komponenten,
die wir nicht direkt als Bildschirme laden, sondern die wir stattdessen in Bildschirme oder in
andere Komponenten einbetten. Das haben wir also hier. Ich werde auch einen Konstantenordner hinzufügen, da ich hier
wieder mit meinen Farbkonstanten arbeiten werde, damit ich meine vorgewählten Farben in der gesamten Anwendung verwenden kann.
Jetzt gibt es eine Reihe verschiedener Einstiegsmöglichkeiten. Was ich zuerst in meinen Apps tun möchte, ist,
dass ich mit den
Bildschirmen beginne, auch wenn ich den Inhalt noch nicht allen hinzufüge, füge ich diesen allgemeinen hinzu Struktur, so
dass ich immer sehen kann, woran ich noch arbeiten muss, welche Funktionen noch fehlen.
Deshalb werde ich die Bildschirme hinzufügen, die ich in dieser App haben werde,
und hier werde ich etwas tun, was ich vorher noch nicht getan habe und was völlig optional ist, aber
ich werde meine Bildschirme in separaten Unterordnern organisieren.
Ich werde einen Ordner mit meinen Shop-bezogenen Bildschirmen haben und
da wir natürlich eine Shopping-App erstellen, sind alle Bildschirme so etwas wie Shop-bezogen, aber hier
möchte ich die Bildschirme haben, die uns direkt beim Anzeigen unserer Produkte und beim Hinzufügen helfen
in
den Warenkorb und so weiter und dann möchte ich einen separaten Ordner haben und das ist mein Benutzerordner, könnte man
sagen, dort möchte ich die
benutzerbezogenen Bildschirme haben, so dass dies meine Benutzerprodukte und Verwaltungsprodukte wären.
So werde ich das aufteilen,
aber natürlich können Sie das organisieren, wie Sie wollen.
Im Shop-Ordner hier möchte ich beispielsweise meinen Produktübersichtsbildschirm haben. Dies ist der Bildschirm, den wir sehen, wenn die App
geladen wird, wo wir alle Produkte haben, mit denen wir arbeiten können, und wo wir dann
ein Produkt auswählen oder direkt hinzufügen können zum Wagen. Wir benötigen daher auch einen Produktdetailbildschirm. Dies ist der Bildschirm,
den wir sehen, wenn wir ein Produkt auswählen und mehr darüber erfahren möchten. Dann können wir darauf klicken
oder darauf tippen und werden zu diesem Detailbildschirm weitergeleitet. Wir brauchen auch einen Warenkorbbildschirm, das ist nicht überraschend der Bildschirm, den
wir sehen, wenn wir einen Artikel zum Warenkorb hinzufügen oder nicht, den wir dann sehen, den wir aber besuchen können, um
den
Artikel dort anzuzeigen. Das können
wir also dort und ich tun. ' Außerdem wird ein Bestellbildschirm hinzugefügt, auf dem wir unsere Bestellungen anzeigen können.
Jetzt könnten Sie übrigens argumentieren, dass der Warenkorbbildschirm und der Bestellbildschirm zum Benutzerordner gehören, da sie
für den Benutzer exklusiv sind, jeder Benutzer seine eigenen Bestellungen und
seinen eigenen Warenkorb hat und Sie daher in beide Richtungen gehen können. Ich glaube, sie
sind ein bisschen mehr auf der Seite der Shop-Produkte, aber auch
das liegt ganz bei Ihnen. Im Benutzerordner möchte
ich den Bildschirm "Benutzerprodukte" haben. In diesem Bildschirm wird eine Liste aller Produkte angezeigt,
die zu diesem Benutzer gehören, und der Bildschirm "Produkt bearbeiten", auf dem neue hinzugefügt werden Produkte
oder zur Bearbeitung bestehender
Produkte können wir diese wiederverwenden.
Dies sind die Bildschirme, in denen wir
in diesem Modul arbeiten werden, und wir werden sie jetzt nicht sofort mit Leben füllen. Wir werden stattdessen Schritt für Schritt daran
arbeiten, aber
es ist das, was wir brauchen.
Jetzt gibt es natürlich noch einen weiteren Ordner, den wir bereits hinzufügen können,
und das ist der Speicherordner, in dem wir unseren Redux-Speicher und unseren Redux-Status verwalten. Dies ist also
unser Statusverwaltungssystem, mit dem ich arbeiten möchte und das wir natürlich brauchen, weil wir viele haben Bildschirme,
die alle an den zugehörigen Daten arbeiten müssen, und daher müssen wir diese Daten, unsere Produkte und die im Warenkorb
befindlichen Daten
usw. auf globaler Ebene verwalten, und Redux ist dafür wirklich
großartig, also werden wir das definitiv brauchen . Aus dem gleichen Grund müssen wir auch einige Pakete
installieren, damit ich npm install --save und install Redux sowie React Redux ausführen kann. Wir werden auch React-Navigation brauchen, da wir
natürlich wieder die Navigation hinzufügen werden, damit wir das schon da reinwerfen können.
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
positionierten Schaltflächen haben möchte, ohne die gesamte Styling-Positionierung selbst vornehmen zu
müssen, und das sollte es vorerst sein.
Also werde ich alle diese Pakete bereits installieren, wir werden sie in diesem Modul
benötigen und mit diesen installierten Paketen und diesen erstellten Basisdateien haben wir ein solides Basis-Setup, mit dem wir beginnen können.
Neben diesen Paketen müssen wir jetzt auch zwei weitere Pakete
mit Hilfe des Befehls expo install installieren. Dies ist der React-Native-Gesten-Handler. Installieren Sie also den
React-Native-Gesten-Handler und auch das React-Native-Reanimated-Paket . Beide Pakete müssen auch mit dem
Befehl expo install installiert werden.
Jetzt geht es natürlich darum, das mit Leben zu füllen, und dort
möchte ich mit dem ersten Bildschirm beginnen, auf dem wir tatsächlich sehen werden, welcher der Produktübersichtsbildschirm ist.