Stellen wir also sicher, dass unsere Produktartikel auf dem Produktübersichtsbildschirm etwas
besser aussehen als derzeit. Im Moment natürlich natürlich Jedes Produktelement wird
nur als Text, als Textkomponente gerendert, und das möchte ich hier nicht. Stattdessen entferne ich diesen Import und erstelle
eine brandneue Komponente, die für mein Produktelement verantwortlich sein sollte.
Ein wichtiger Hinweis dazu, wo wir diese Komponente erstellen, können wir hier in
der Produktübersicht erstellen. js Datei auch, wir können natürlich
mehr als eine Komponente pro Datei haben, also könnte ich hier meine Produktartikelkomponente hinzufügen oder wie auch immer Sie es so nennen
möchten, dann können wir diese Komponente in dieser Datei verwenden, was natürlich ist was ich vorhabe zu tun.
Dies ist ein Muster, das Sie verwenden können, wenn Sie eine Komponente haben, die wirklich stark an eine andere Komponente gebunden
ist, und Sie sie nur so aufteilen, dass jede Komponente etwas besser lesbar ist.
Sobald diese separaten Komponenten sehr groß werden, sollten Sie dennoch in Betracht ziehen, sie in separate Dateien aufzuteilen,
damit Ihre Dateien klein bleiben. Wenn Benutzer sich eine der beiden Komponenten ansehen möchten, müssen
sie nicht über die andere Komponente scrollen sie könnten nicht interessiert sein.
Das ist also eine Sache, die Sie beachten sollten. Wenn Sie eine Komponente auch in einer anderen Komponente verwenden
möchten, sollten Sie sie natürlich immer in einer separaten Datei speichern, nicht nur, damit Sie sie standardmäßig exportieren können, da Sie sie auch exportieren
können, wenn sie zusammen mit einer anderen Komponente gespeichert wird. Dies ist nicht
der Hauptgrund, sondern vor allem, um deutlich zu machen, dass dies eine eigenständige Komponente ist, die möglicherweise in verschiedenen Teilen Ihrer
App verwendet wird und wird.
Jetzt wird das Produkt hier nicht nur nicht sehr klein sein, was für sich genommen ein Grund wäre, es in
eine separate Datei zu stellen, sondern ich werde es später auch in einer anderen Komponente oder
an verschiedenen Stellen der App verwenden, es ist nicht nur relevant Zum Produktübersichtsbildschirm füge ich ihn daher im
Komponentenordner und in diesem Komponentenordner hinzu. Um meine Komponenten ein wenig zu organisieren, füge ich einen
Shop-Unterordner hinzu, in dem ich alle vorhandenen Komponenten platzieren möchte in direktem Zusammenhang mit der Shop-Funktion oder
den Funktionen im Allgemeinen meiner App.
Dort im Shop-Unterordner füge ich dieses ProductItem hinzu. js Datei und Sie werden sehen, welche anderen Ordner
ich später hier hinzufügen werde.
Alle diese Muster und Praktiken, die ich Ihnen hier zeige, sind nur mögliche Möglichkeiten, dies zu tun. Im Allgemeinen zeige
ich in meinen Kursen und auch in diesem Kurs alle Best Practices, die Sie verwenden können, aber häufig beim Programmieren gibt
es keine Nur ein einziger richtiger oder falscher
Weg, also sind die Praktiken und Muster, die ich hier zeige, Praktiken und Muster, die Sie auch in anderen Projekten
sehen werden, aber Sie können auch andere Ordnerstrukturen sehen. Am Ende können Sie immer mit der Struktur arbeiten,
die funktioniert für Sie, hier gibt es keine richtige oder falsche Wahl. Ich möchte nur meine Gründe für die Verwendung dieser Struktur erläutern,
die Ihnen hoffentlich helfen, zu verstehen, warum ich sie verwende und warum dies einen Gedanken wert sein könnte.
Also hier die Produktartikeldatei, das ProductItem. Die js-Datei enthält natürlich die Produktelementkomponente, die eine normale Funktionskomponente ist, die Requisiten
empfängt und am Ende jsx-Code zurückgibt. Da sie jsx-Code enthält, müssen wir React aus React
importieren, und hier werde ich auch Importieren Sie Dinge aus React Native, da ich hier jetzt mit diesen React Native-Grundelementen
arbeiten werde, um meine Komponente wirklich zu erstellen, da ich von dort aus die Ansicht, den Text und das Bild
verwenden möchte, weil wir ' Ich werde hier das Produktbild und auch
das Stylesheet anzeigen, da wir dies definitiv auch stylen werden. Daher können Sie hier auch bereits eine Styles-Konstante
hinzufügen, die wir mit Stylesheet erstellen. erstellen, an die wir ein Javascript-Objekt übergeben,
und am Ende exportieren wir dieses Produktelement hier natürlich standardmäßig. Jetzt hier, in dieser Komponente, meine ich, können wir mit
der Erstellung des jsx-Codes beginnen, aus dem das Produktelement besteht, und dies wird eine Präsentationskomponente sein,
was bedeutet, dass hier keine Logik vorhanden ist, wir werden keinen internen Status verwalten. Dies ist
nur eine Komponente, die wir in anderen Komponenten verwenden können, um das richtige Design und
Layout zu erhalten. Daher ist diese Komponente hier dafür verantwortlich, bestimmte React Native-Komponenten zu verwenden und sie
auf eine bestimmte Weise auszulegen und zu gestalten. Hier möchte ich am Ende eine Ansicht
zurückgeben, die alles umhüllt, die alles organisiert, die wir auch stylen können, um
diesen Wagen-Look mit vielleicht einem Schlagschatten, vielleicht abgerundeten Ecken zu erhalten, was auch immer Sie wollen, und da
drin, wir jetzt haben verschiedene Teile, zum Beispiel haben wir definitiv das Bild dort, das Produktbild, ich möchte auch
den Titel und den Preis haben, also
brauchen wir hier einen Text, also für den Titel hier und hier dann Für den Preis in Dollar und darunter möchte ich auch eine
Ansicht mit Schaltflächen haben, sodass
wir hier momentan die integrierte Schaltflächenkomponente verwenden können, um dann ein Produkt in den Warenkorb
zu legen oder auch die Details anzuzeigen Wenn wir also diese beiden Optionen haben, müssen wir
hier natürlich onPress-Handler hinzufügen. Das ist also das sehr grundlegende Skelett, wahrscheinlich
nicht das letzte. Wir müssen sehen, wie wir hier alles stylen können, aber das ist
das Layout, das ich will.
Ich wickle meine Schaltflächen hier übrigens in die Ansicht ein, weil ich sie nebeneinander in der Reihe haben möchte.
Wenn wir eine Ansicht um sie haben, können wir diese Ansicht so gestalten, dass sie eine Reihe mit flexibler Richtung verwendet
und so weiter.
Das
ist also ein Setup, mit
dem wir hier arbeiten können. Fügen
wir nun ein paar Stile hinzu. Dazu möchte ich die
umgebende Ansicht verwenden oder hier beginnen, in der ich ein Stile-Produkt wie dieses einrichte. Deshalb
füge ich hier im Stylesheet ein solches Produkt hinzu.
Fügen Sie hier und jetzt wieder meinen
Produktschlüssel hinzu. Es liegt ganz bei Ihnen, wie Sie dies gestalten möchten. Ich möchte, dass die Karte so aussieht. Deshalb füge ich einen Schatten hinzu,
eine Schattenfarbe, die schwarz sein kann, eine Schattenopazität das kann 0 sein. 26, ein Schattenversatz, bei dem ich den Breitenversatz von Null und einen Höhenversatz
von zwei und einen Schattenradius von acht habe, vielleicht und wie
immer mit diesen Werten herumspielen, um Ihre Konfiguration zu finden.
Jetzt erinnern Sie sich vielleicht daran, dass Shadow nur
unter iOS funktioniert. Für Android füge ich hier die Elevation-Eigenschaft hinzu und setze diese möglicherweise auf fünf. Auch hier können
Sie wieder mit verschiedenen Werten experimentieren, und
ich möchte einen Randradius von 10 haben, weil Ich möchte abgerundete Ecken und
wieder, das ist etwas,
was ich hier möchte, etwas, das Sie nicht tun müssen. Ich werde auch eine Hintergrundfarbe Weiß hinzufügen, um sicherzustellen,
dass unser Warenkorb hier, unser Produkt, immer diese Hintergrundfarbe hat, auch wenn unsere
Haupt-App später eine andere Hintergrundfarbe verwenden sollte. Das ist also mein Produkt, meine Hülle hier um das gesamte Produkt. Ich möchte hier auch meine Körpergröße einstellen, jedes
Produkt sollte eine Höhe von 300 Pixel
haben und das ist natürlich ein Wert, den Sie auch an Ihre Anforderungen
anpassen können.
Sie können dies natürlich auch mit der Dimensions-API dynamisch gestalten, wie Sie es im
Responsive-Modul gelernt haben, und ich werde einen Rand von 20 in alle Richtungen um jedes Produktelement hinzufügen,
damit wir einen Abstand in alle Richtungen haben. Mit diesem Setup können wir anfangen, an der Ausgabe von
etwas zu arbeiten. Das Image benötigt also eine Quelle und wir erhalten hier ein Netzwerk-Image.
Wenn Sie sich die Dummy-Daten ansehen, sind alle diese Image-URLs hier URLs Im Modell erwarten wir
hier eine URL,
also zu einem Netzwerk-Image, und das wäre natürlich die Standardeinstellung für jeden Shop, den Sie
erstellen, da Sie niemals alle Produkt-Images in Ihre App aufnehmen, zumindest wenn es keine gibt App-Shop für ein Spiel, aber wenn es
sich um einen Shop handelt, in dem
Benutzer Produkte erstellen können, erstellen Benutzer offensichtlich Produkte dynamisch, nachdem Ihre App verteilt wurde.
Daher können Sie nicht alle Bilder in Ihre App aufnehmen, sondern müssen sie auf einem Server speichern .
Daher müssen wir hier ein Objekt an die Quelle übergeben, in der wir die
URI-Eigenschaft festgelegt haben, und das wird nun von außen empfangen, da diese Produktelementkomponente präsentativ
ist. Daher müssen alle anzuzeigenden Daten über Requisiten und dort übergeben werden Sie könnten die Image-Requisite
erwarten, aber wie bei allen Requisiten
in Ihren eigenen Komponenten können Sie beliebige Namen auswählen. Für den Titel erwarte ich eine Titelstütze und für den Preis erwarte
ich eine Preisstütze. Ich werde das Dollarzeichen hier übrigens behalten, weil der Preis nur eine Zahl sein wird
und ich natürlich eine haben möchte Dollarzeichen davor.
Nun eine kleine Anmerkung hier, ich möchte sicherstellen, dass der Preis, den ich bekomme, immer genau zwei Dezimalstellen hat, und wir können dies
erreichen, indem wir anrufen, dies zu fixieren und zwei zu übergeben. Zu fest ist eine Funktion, die für
Zahlen in Javascript verfügbar ist und diese in eine Zeichenfolge mit einer festen Anzahl
von Dezimalstellen konvertiert. Hier beschränke ich mich
auf immer
zwei Dezimalstellen, das ist normales Javascript, nichts Spezielles für React Native. Wenn wir jetzt auf die Schaltfläche "Details anzeigen" klicken, werden Requisiten für Ansichtsdetails
ausgelöst. Daher verwende ich hier wieder einen Namen, den Sie konfigurieren oder benennen können, wie Sie möchten. Die
Idee hier ist jedoch, dass Requisiten für Ansichtsdetails auf eine Funktion verweisen,
die in Das Ende wird ausgeführt, wenn dieser Knopf
gedrückt wird. Wenn dieser Knopf gedrückt wird, zeige ich hier auf eine Funktion, die ich auf der On-Add-to-Cart-Requisite erwarte.
Auch
hier können Sie diese Requisiten beliebig benennen. Wenn Sie jedoch Ihre Komponente verwenden,
müssen Sie sicherstellen, dass sie verfügbar sind und dass sie Werte erhalten, die Funktionen sind, die dann über diese Schaltflächen ausgelöst werden.
Jetzt bekommen wir alle Daten. Da es sich bei dem
Image um ein Netzwerk-Image handelt, müssen Breite und Höhe festgelegt werden, da das Image dies nicht im Voraus sehen kann, da
dies für ein lokales Image und für ein Netzwerk
nicht möglich ist Bild, also hier werde ich auf Stile zeigen. Bild und ich werde diesen Bildschlüssel dort vorerst zu meinem Stylesheet hinzufügen.
Auch hier liegt es im Allgemeinen an Ihnen, wie Sie dies stylen, aber ich werde dies auf eine Breite
von beispielsweise
60% einstellen. Beachten Sie, dass das Gesamtprodukt eine Breite von 100%, aber eine Höhe von 60% hat, da das Gesamtprodukt Artikel hier hat eine
Höhe von 300 und ich möchte das Bild dort haben, das auch den größten Teil der Höhe einnehmen sollte,
aber ich habe auch den Titel und den Preis und meine Knöpfe und diese sollten auch dort
passen, also ich '
Geben Sie dem Bild 60% der Höhe,
damit die anderen Dinge hier die restlichen 40% unter ihnen aufteilen können. Das ist also das Bild, jetzt ist das Bild natürlich
nicht alles, was wir hier haben, wir haben auch unseren Titel, wir haben unseren Preis
und ich möchte das auch stylen.
Für den Titel füge ich hier den Titelstil und für den Preis einen Preisstil hinzu.
Hier füge ich für diese Schaltflächen auch der umgebenden Ansicht einen Stil hinzu und benenne diesen Aktionen und
natürlich all diese Stilnamen liegen wie immer ganz bei Ihnen. Hier möchte ich meinen Titel
und den Preis und die Aktionseigenschaft hier und jetzt zu meinem Stylesheet hinzufügen. Für den Titel können Sie
dies natürlich so gestalten, wie Sie möchten.
Wir haben hier keine benutzerdefinierten Schriftarten,
ich werde bald einige hinzufügen, aber im Moment werde ich
das einfach ignorieren und mit einer Schriftgröße von 18 beginnen und einen vertikalen Rand hinzufügen, also oben und unten 3
oder 4, also ein sehr kleiner Rand, aber immer noch ein gewisser Rand um diesen Titel. Für den Preis werde ich eine Schriftgröße von 14 festlegen,
die etwas kleiner ist, und ich werde dieser auch eine Farbe geben, die vielleicht 888 sein sollte,
was einer grauen, dunkelgrauen Farbe entspricht.
Jetzt werden Aktionen in dieser Ansicht platziert, in der sich die Schaltflächen befinden. Daher möchte ich sicherstellen, dass
die Schaltflächen nebeneinander liegen, also in einer Reihe.
Daher gebe ich hier eine Flex-Richtung der Reihe an und begründe den Inhalt so, dass der gesamte verbleibende Abstand zwischen ihnen liegt.
Außerdem möchte ich Elemente in der Mitte vertikal ausrichten, also entlang der Querachse, die für eine Flex-Richtung
gilt der Reihe ist die vertikale Achse.
Damit haben wir ein grundlegendes Styling. Lassen Sie
uns nun diese Komponente verwenden, bevor wir das Setup und das Styling verfeinern. Die Produktartikelkomponente, die wir hier in die
Produktartikeldatei exportieren, kann jetzt in der Produktübersichtsdatei verwendet werden, indem der
Produktartikel von dort importiert wird.
Zeigen wir also auf unseren Komponentenordner, dort auf den Shop-Unterordner und dann auf den Produktartikel und
Dies ist das, was ich hier verwenden möchte, wenn ich meine Elemente rendere.
Das Produktelement kann eine selbstschließende Komponente sein, da alle Daten über Requisiten und nicht zwischen den öffnenden
und schließenden Tags empfangen werden. Jetzt müssen
wir natürlich alle Dinge einrichten, die wir hier erwarten.
Wir erwarten hier ein Bild, den Titel, den Preis und unsere beiden Event-Requisiten. Deshalb
müssen wir das jetzt bereitstellen.
Daher beginne ich hier mit dem
Produkt mit dem Bild und das ist natürlich itemData. Artikel. imageUrl und Sie
müssen sich immer an diese itemData erinnern. Artikelpunkte als Produkt, wie in unserem Produktmodell definiert, und daher
wird eine imageUrl-Eigenschaft wie folgt geschrieben. Wenn Sie es anders
geschrieben haben, müssen Sie natürlich anders darauf zugreifen. Neben dem Bild haben wir
auch einen Titel, itemTata. Artikel. Titel und außerdem haben wir den Preis mit
itemData. Artikel. Preis
und dann haben wir unsere beiden Event-Handler hier, weil wir die On-View-Detail-Requisite und die
On-Add-to-Cart-Requisite haben, die wir hinzufügen müssen. In der Ansicht werden Details später ausgeführt, im Moment ist es
nur eine leere Funktion, und beim Hinzufügen zum Warenkorb wird später
auch etwas ausgeführt. Im Moment kann es sich
auch um eine leere Funktion handeln. So sollte unser Produktartikel gerendert werden. Wenn wir dies speichern, ist dies das,
was Sie sehen sollten. Es ist noch nicht perfekt,
aber wir kommen dorthin. Das ist eigentlich nicht schlecht.
Jetzt fällt Ihnen natürlich auf, dass die Schaltflächen falsch gefärbt sind, dass dieser Bereich nicht so
verwendet wird, wie er dort unten verwendet werden sollte, dass wir diesen Text vielleicht auch
zentrieren möchten, aber das sind natürlich Dinge wir können daran arbeiten. Um dies zu verfeinern, beginnen wir hier in der Produktartikelkomponente
mit unseren beiden Texten hier.
Sie sollten natürlich zentriert sein, und das kann auf sehr einfache Weise geschehen, indem Sie diese mit
einer Ansicht umschließen, diese beiden Texte dort hinein verschieben, dieser Ansicht einen Stil geben, und natürlich
können Sie dies
benennen, wie Sie möchten, ich werde es nennen Es enthält Details, da wir
die Produktdetails dort so gestalten, dass ich meinen Detailstil hier zum Stylesheet hinzufüge und dort einfach die Mitte der Ausrichtungselemente festlegen werde.
Dies verwendet eine Flex-Richtung der Säule, die Standardeinstellung, und zentriert sich daher auf der Querachse. Dies geschieht immer,
aber die Querachse für die Flex-Richtungssäule ist natürlich von links
nach rechts, sodass sie horizontal zentriert ist, was ich hier und ich möchte. Ich gebe auch eine Höhe von 15%.
Denken Sie daran, dass das Bild 60% benötigt, also geben wir dies
vielleicht 15%, also fast die Hälfte der verbleibenden 40%, nicht ganz die Hälfte.
Und ich werde hier ein bisschen Polsterung von vielleicht 10 hinzufügen.
Und für die Schaltflächen hier befinden sich diese in meiner Aktionseigenschaft. Dort möchte ich die Höhe
auf die verbleibenden 25% einstellen. Dies sollte natürlich eine Zeichenfolge
sein, da wir hier 60% Höhe haben, dann haben wir hier
15%, daher hier
Ich möchte die restlichen 25% behalten und wenn wir dies jetzt speichern, sieht das viel besser aus.
Jetzt wäre ein gewisser Abstand links und rechts auch für
die Schaltflächen hilfreich. In dieser Eigenschaft für den Aktionsstil füge ich einen horizontalen Abstand von 20 hinzu, sodass wir einen inneren Abstand
links oder rechts haben. Um nun die Farbe
der Schaltflächen zu ändern, können Sie einfach zu den Schaltflächenkomponenten gehen, die in
React Native integriert sind,
und die Farbrequisite hier auf Farben einstellen, die Sie daher aus dem Konstantenordner und aus
der dortigen
Farbdatei importieren müssen, und diese festlegen dann zu den primären Farben, auch hier für die zweite Farbe, die Schaltfläche zum Hinzufügen zum Warenkorb, die zweite Schaltfläche daher.
Jetzt haben wir unsere Schaltflächen
hier, fügen sie dem Warenkorb hinzu und zeigen Details an, und das sieht nicht schlecht aus.
Die einzige verbleibende Sache, die Sie möglicherweise bemerken, ist, dass wir hier oben keine abgerundeten
Ecken haben. Der Grund dafür ist, dass unser Bild im Grunde wie eine Überlagerung unseres Hintergrunds ist und der Hintergrund die
umgebende Ansicht ist,
das Bild hat keine abgerundete Ecken und daher überlappt es unsere abgerundeten Ecken, die
wir auf der umgebenden Ansicht haben. Um dies zu beheben, können
wir das Bild in eine separate Ansicht einbinden. Wie ich bereits
im Kurs erwähnt habe, ist es in React Native wirklich normal, ein paar
verschachtelte Ansichten zu haben, da wir dieser Ansicht jetzt einen Stil hinzufügen können, den wir vielleicht können Geben Sie eine Bildcontainer-ID an, die wir jetzt
zu unserem Stylesheet hinzufügen können. Jetzt gebe ich diesem Bildcontainer hier und auf dem Bild meine Breite und Höhe. Daher
füge ich nur eine Breite und Höhe von 100% hinzu, da er
sich jetzt
innerhalb von befindet Der Container,
dies bezieht sich
hier auf das übergeordnete Element, also auf diesen Container, sodass
dann auch eine Höhe von 60% auf das Bild angewendet
wird. Auf diesem Bildcontainer können wir jetzt einen oberen linken Radius von 10 und einen oberen
Rand hinzufügen Der rechte Radius von
10, damit wir diese Ecken abrunden und jetzt wichtig sind, fügt hier einen versteckten Überlauf hinzu, da dies sicherstellt, dass
jedes Kind dort, das unser Bild ist, natürlich nicht überlappen kann, was wir hier eingerichtet haben.
Mit diesem Setup fügen wir unsere abgerundeten Ecken hier oben wieder hinzu. Dies
sind nun die Bildelemente, die ich hier haben möchte. Natürlich ist dies auch eine scrollbare Liste,
in der Sie auch sehen, dass diese Bilder automatisch verzögert geladen werden und Sie weiterarbeiten können mit.
Das nächste Ziel könnte natürlich sein, dass wir auch den Detailbildschirm anzeigen können.