Auf dem Produktdetailbildschirm haben wir bereits damit begonnen, aber wir geben dort nichts
Nützliches aus. Jetzt ist es Zeit,
dies zu ändern.
Dafür werde ich den jsx-Code, den wir derzeit dort verwenden, durch eine Bildlaufansicht ersetzen, da wir, wie
bereits erwähnt, unser Bild dort und
unsere Produktbeschreibung ausgeben und dies eine sehr lange Beschreibung sein könnte
oder einfach Wenn wir dies auf
einem kleineren Gerät oder im Querformat anzeigen,
möchten wir auf jeden Fall einen scrollbaren Inhalt haben. Übrigens brauchen wir hier
keine flache Liste, da der Inhalt nicht unendlich lang sein
wird. Wir wissen ziemlich genau, dass dies nicht der Fall ist Seien Sie so lange im Voraus,
damit die Bildlaufansicht vollkommen in Ordnung ist. In dieser Bildlaufansicht können Sie jetzt eine Bildkomponente hinzufügen, die das Produktbild oben ausgibt. Nehmen wir an,
darunter können wir möglicherweise unsere Schaltfläche hinzufügen, um dies zu ermöglichen Fügen Sie dies in einen Warenkorb und darunter können wir unseren Text haben, z. B. den Preis und dann vielleicht den Text für
die Beschreibung anzeigen. Für das Bild müssen wir
also die Quell-Requisite einrichten, und das ist ein Objekt, das eine URI-Eigenschaft hat, und natürlich haben wir hier
unser ausgewähltes Produkt, also ist die Quelle nur ausgewähltes Produkt. imageUrl, da das ausgewählte Produkt von dem
Typ ist, den wir in unserem Produktmodell definiert haben. Auf der Schaltfläche hier können wir einen Titel für
"In den Warenkorb" hinzufügen, da dies letztendlich das ist, was diese Schaltfläche tun sollte, und onPress im Moment
nichts unternimmt, aber später werden wir dies dem Warenkorb hinzufügen. Dann möchte ich hier den Preis ausgeben, wir müssen
den Titel nicht
ausgeben, da dies bereits Teil des Headers ist, also
sehen wir den Titel dort, aber hier möchte ich den Preis in Dollar ausgeben, indem ich mich
auf das ausgewählte Produkt beziehe. Preis fest 2, was ich
vorher gemacht habe und dann dort unten
auch die Beschreibung, also haben wir hierProdukt ausgewählt. Beschreibung, so.
Okay,
das sieht gut aus,
jetzt ist es natürlich Zeit für ein Styling.
Zum Beispiel müssen wir für das Bild definitiv eine Breite und Höhe festlegen, da es sich
um ein Netzwerkbild handelt. Deshalb füge ich hier den Bildstil hinzu, den ich meinem Stylesheet hinzufügen muss.
Nun zu den Texten hier sollte dieser Text einen Preisstil haben, den
wir vielleicht hinzufügen müssen, und dann sollte dieser Text hier einen Beschreibungsstil haben, der sich wie ein passender Name anhört.
Jetzt müssen wir im Stylesheet all diese Dinge hinzufügen, also fangen wir mit dem Bild an.
Dort werde ich eine Breite von 100% hinzufügen,
dies sollte wirklich die volle verfügbare Breite und eine Höhe von 300
annehmen, und natürlich können
Sie damit herumspielen, Sie könnten auch einen Prozentwert dafür verwenden oder die Dimensions-API verwenden Art dies dynamisch zu berechnen.
Danach möchte ich meinen Preis haben, dieser Preistext sollte eine
Schriftgröße von 20 haben, weil die Leute ihn natürlich sehen können sollten, eine Farbe dieses Graus, diese dunkelgraue
Farbe, die ich bereits früher verwendet habe, und eine Textausrichtung der Mitte so dass es immer
zentriert ist, auch ein
Rand auf der vertikalen Achse von 20 vielleicht, also um ihn herum, von 20 und danach die Beschreibung.
Beschreibung kann tatsächlich eine Schriftgröße von beispielsweise 14 haben. Mal sehen, ob das funktioniert, und dort
auch das Textausrichtungszentrum verwenden, so etwas. Wenn wir das speichern, schauen wir
uns das an, sieht nicht schlecht aus. Nun möchte ich für die Schaltfläche eine andere Farbe festlegen, daher füge ich hier
Farbe hinzu und setze diese auf Farben, die wir natürlich aus unserem Konstantenordner Farben importieren müssen. primär und jetzt, wenn wir dies speichern,
sieht das ganz gut aus. Unter Android sehen Sie jedoch, dass sich die Schaltfläche direkt unter dem Bild befindet und
dass es sich um eine Schaltfläche in voller Breite handelt.
Hier ist es für iOS genauso, dort
sehen wir es einfach
nicht, aber wenn ich hier tippe, sehen Sie auch, dass diese Schaltfläche gedrückt wird und das ist eigentlich nicht das, was ich hier will.
Also werde ich diese Schaltfläche in eine Ansicht einschließen, die einen Stil von beispielsweise Aktionen enthält, obwohl es hier nur eine Aktion
ist, könnten Sie hier möglicherweise mehrere Schaltflächen für verschiedene Dinge haben.
Also füge ich meinen Aktionsschlüssel hier zum Stylesheet hinzu und dort können
wir einen Rand auf der vertikalen Achse von 10 nach oben und unten festlegen und Ihre Elemente in der Mitte
ausrichten, die, da
die Standardflexrichtung Spalte ist, zentriert es horizontal und jetzt haben wir hier mehr Abstand und wir sehen dies noch
besser auf Android, mehr Abstand und die
Schaltfläche wird jetzt nicht mehr so gedehnt, wie es wäre, ihre Standardausrichtungseinstellung nimmt mehr an, sondern
nimmt nur noch so viel Breite wie nötig und ist ausgerichtet Im Zentrum.
Das ist also das
Setup,
mit dem ich gehen werde. Natürlich können Sie dies immer noch auf verschiedene Arten optimieren,
wenn Sie möchten. Für mich
sieht das nicht schlecht aus. Lassen Sie uns auch wie ein anderes Element aussehen, vielleicht auch dieses,
ja , das sieht alles ganz gut aus.
Für einen längeren Text hier sehen Sie jedoch, dass das nicht so schön ist, es sollte mehr Abstand geben.
In der Beschreibung füge ich also auch einen kleinen horizontalen Rand von beispielsweise 20 hinzu, damit wir einen Abstand dazu haben.
Wenn wir uns das noch einmal ansehen, sehen Sie jetzt, dass dies automatisch in eine neue Zeile springt, die
es sollte .
Okay, das sieht
gut aus, jetzt haben wir den Produktdetailbildschirm.
Bevor wir fortfahren, möchte ich meine eigenen Schriftarten mitbringen und diese verwenden, da ich mit den Standardschriftarten nicht zufrieden
bin.