1 00:00:02,180 --> 00:00:07,440 Auf dem Produktdetailbildschirm haben wir bereits damit begonnen, aber wir geben dort nichts 2 00:00:07,850 --> 00:00:10,240 Nützliches aus. Jetzt ist es Zeit, 3 00:00:10,250 --> 00:00:11,600 dies zu ändern. 4 00:00:11,690 --> 00:00:17,570 Dafür werde ich den jsx-Code, den wir derzeit dort verwenden, durch eine Bildlaufansicht ersetzen, da wir, wie 5 00:00:17,570 --> 00:00:19,790 bereits erwähnt, unser Bild dort und 6 00:00:19,790 --> 00:00:23,510 unsere Produktbeschreibung ausgeben und dies eine sehr lange Beschreibung sein könnte 7 00:00:23,510 --> 00:00:25,790 oder einfach Wenn wir dies auf 8 00:00:25,850 --> 00:00:28,410 einem kleineren Gerät oder im Querformat anzeigen, 9 00:00:28,640 --> 00:00:33,020 möchten wir auf jeden Fall einen scrollbaren Inhalt haben. Übrigens brauchen wir hier 10 00:00:33,100 --> 00:00:36,420 keine flache Liste, da der Inhalt nicht unendlich lang sein 11 00:00:36,440 --> 00:00:42,020 wird. Wir wissen ziemlich genau, dass dies nicht der Fall ist Seien Sie so lange im Voraus, 12 00:00:42,020 --> 00:00:50,210 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, 13 00:00:50,220 --> 00:01:01,560 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 14 00:01:01,560 --> 00:01:04,260 die Beschreibung anzeigen. Für das Bild müssen wir 15 00:01:04,270 --> 00:01:08,980 also die Quell-Requisite einrichten, und das ist ein Objekt, das eine URI-Eigenschaft hat, und natürlich haben wir hier 16 00:01:09,330 --> 00:01:14,530 unser ausgewähltes Produkt, also ist die Quelle nur ausgewähltes Produkt. imageUrl, da das ausgewählte Produkt von dem 17 00:01:14,620 --> 00:01:20,680 Typ ist, den wir in unserem Produktmodell definiert haben. Auf der Schaltfläche hier können wir einen Titel für 18 00:01:20,680 --> 00:01:26,530 "In den Warenkorb" hinzufügen, da dies letztendlich das ist, was diese Schaltfläche tun sollte, und onPress im Moment 19 00:01:26,620 --> 00:01:32,970 nichts unternimmt, aber später werden wir dies dem Warenkorb hinzufügen. Dann möchte ich hier den Preis ausgeben, wir müssen 20 00:01:33,010 --> 00:01:34,390 den Titel nicht 21 00:01:34,390 --> 00:01:37,600 ausgeben, da dies bereits Teil des Headers ist, also 22 00:01:37,600 --> 00:01:43,630 sehen wir den Titel dort, aber hier möchte ich den Preis in Dollar ausgeben, indem ich mich 23 00:01:43,630 --> 00:01:47,810 auf das ausgewählte Produkt beziehe. Preis fest 2, was ich 24 00:01:48,100 --> 00:01:50,410 vorher gemacht habe und dann dort unten 25 00:01:50,410 --> 00:01:56,170 auch die Beschreibung, also haben wir hierProdukt ausgewählt. Beschreibung, so. 26 00:01:56,200 --> 00:01:56,560 Okay, 27 00:01:56,590 --> 00:01:57,670 das sieht gut aus, 28 00:01:57,670 --> 00:01:59,380 jetzt ist es natürlich Zeit für ein Styling. 29 00:01:59,380 --> 00:02:04,270 Zum Beispiel müssen wir für das Bild definitiv eine Breite und Höhe festlegen, da es sich 30 00:02:04,270 --> 00:02:09,350 um ein Netzwerkbild handelt. Deshalb füge ich hier den Bildstil hinzu, den ich meinem Stylesheet hinzufügen muss. 31 00:02:09,460 --> 00:02:15,040 Nun zu den Texten hier sollte dieser Text einen Preisstil haben, den 32 00:02:15,580 --> 00:02:24,490 wir vielleicht hinzufügen müssen, und dann sollte dieser Text hier einen Beschreibungsstil haben, der sich wie ein passender Name anhört. 33 00:02:24,490 --> 00:02:31,690 Jetzt müssen wir im Stylesheet all diese Dinge hinzufügen, also fangen wir mit dem Bild an. 34 00:02:31,980 --> 00:02:34,580 Dort werde ich eine Breite von 100% hinzufügen, 35 00:02:34,580 --> 00:02:38,730 dies sollte wirklich die volle verfügbare Breite und eine Höhe von 300 36 00:02:38,740 --> 00:02:40,570 annehmen, und natürlich können 37 00:02:40,570 --> 00:02:46,810 Sie damit herumspielen, Sie könnten auch einen Prozentwert dafür verwenden oder die Dimensions-API verwenden Art dies dynamisch zu berechnen. 38 00:02:48,000 --> 00:02:52,970 Danach möchte ich meinen Preis haben, dieser Preistext sollte eine 39 00:02:53,080 --> 00:03:01,810 Schriftgröße von 20 haben, weil die Leute ihn natürlich sehen können sollten, eine Farbe dieses Graus, diese dunkelgraue 40 00:03:01,870 --> 00:03:09,670 Farbe, die ich bereits früher verwendet habe, und eine Textausrichtung der Mitte so dass es immer 41 00:03:09,670 --> 00:03:11,780 zentriert ist, auch ein 42 00:03:11,850 --> 00:03:20,640 Rand auf der vertikalen Achse von 20 vielleicht, also um ihn herum, von 20 und danach die Beschreibung. 43 00:03:21,240 --> 00:03:30,660 Beschreibung kann tatsächlich eine Schriftgröße von beispielsweise 14 haben. Mal sehen, ob das funktioniert, und dort 44 00:03:30,680 --> 00:03:38,810 auch das Textausrichtungszentrum verwenden, so etwas. Wenn wir das speichern, schauen wir 45 00:03:38,810 --> 00:03:47,420 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 46 00:03:47,450 --> 00:03:56,170 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, 47 00:03:56,200 --> 00:04:03,500 sieht das ganz gut aus. Unter Android sehen Sie jedoch, dass sich die Schaltfläche direkt unter dem Bild befindet und 48 00:04:03,680 --> 00:04:06,300 dass es sich um eine Schaltfläche in voller Breite handelt. 49 00:04:06,320 --> 00:04:07,900 Hier ist es für iOS genauso, dort 50 00:04:07,910 --> 00:04:08,830 sehen wir es einfach 51 00:04:08,840 --> 00:04:13,940 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. 52 00:04:14,150 --> 00:04:23,310 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 53 00:04:23,310 --> 00:04:28,160 ist, könnten Sie hier möglicherweise mehrere Schaltflächen für verschiedene Dinge haben. 54 00:04:28,350 --> 00:04:32,890 Also füge ich meinen Aktionsschlüssel hier zum Stylesheet hinzu und dort können 55 00:04:33,030 --> 00:04:40,530 wir einen Rand auf der vertikalen Achse von 10 nach oben und unten festlegen und Ihre Elemente in der Mitte 56 00:04:41,930 --> 00:04:43,260 ausrichten, die, da 57 00:04:43,430 --> 00:04:50,740 die Standardflexrichtung Spalte ist, zentriert es horizontal und jetzt haben wir hier mehr Abstand und wir sehen dies noch 58 00:04:50,740 --> 00:04:53,750 besser auf Android, mehr Abstand und die 59 00:04:53,780 --> 00:05:00,100 Schaltfläche wird jetzt nicht mehr so gedehnt, wie es wäre, ihre Standardausrichtungseinstellung nimmt mehr an, sondern 60 00:05:00,100 --> 00:05:05,230 nimmt nur noch so viel Breite wie nötig und ist ausgerichtet Im Zentrum. 61 00:05:05,240 --> 00:05:06,310 Das ist also das 62 00:05:06,440 --> 00:05:07,050 Setup, 63 00:05:07,070 --> 00:05:11,480 mit dem ich gehen werde. Natürlich können Sie dies immer noch auf verschiedene Arten optimieren, 64 00:05:11,480 --> 00:05:13,150 wenn Sie möchten. Für mich 65 00:05:13,160 --> 00:05:18,360 sieht das nicht schlecht aus. Lassen Sie uns auch wie ein anderes Element aussehen, vielleicht auch dieses, 66 00:05:18,440 --> 00:05:20,820 ja , das sieht alles ganz gut aus. 67 00:05:20,870 --> 00:05:25,790 Für einen längeren Text hier sehen Sie jedoch, dass das nicht so schön ist, es sollte mehr Abstand geben. 68 00:05:26,240 --> 00:05:34,700 In der Beschreibung füge ich also auch einen kleinen horizontalen Rand von beispielsweise 20 hinzu, damit wir einen Abstand dazu haben. 69 00:05:34,700 --> 00:05:42,600 Wenn wir uns das noch einmal ansehen, sehen Sie jetzt, dass dies automatisch in eine neue Zeile springt, die 70 00:05:42,600 --> 00:05:43,890 es sollte . 71 00:05:44,970 --> 00:05:46,290 Okay, das sieht 72 00:05:46,290 --> 00:05:48,380 gut aus, jetzt haben wir den Produktdetailbildschirm. 73 00:05:48,480 --> 00:05:53,970 Bevor wir fortfahren, möchte ich meine eigenen Schriftarten mitbringen und diese verwenden, da ich mit den Standardschriftarten nicht zufrieden 74 00:05:53,970 --> 00:05:54,420 bin.