1
00:00:02,360 --> 00:00:08,330
Stellen wir also sicher, dass wir zum Bildschirm zum Bearbeiten von Produkten gehen können, und

2
00:00:08,330 --> 00:00:17,550
dafür werde ich ihn natürlich zuerst mit etwas Leben füllen, indem ich React aus React importiere und dann auch einige Dinge aus React Native

3
00:00:17,850 --> 00:00:24,960
und diese einige Dinge für den Moment importiere wird die Ansicht und den Text sowie ein Stylesheet enthalten,

4
00:00:24,960 --> 00:00:26,610
das wir später benötigen

5
00:00:26,670 --> 00:00:34,980
werden, und dann haben wir hier den Bildschirm zum Bearbeiten des Produkts, auf dem ich Requisiten bekomme und etwas jsx zurückgeben muss.

6
00:00:34,980 --> 00:00:45,420
Ich habe mein Styles-Objekt hier mit Stylesheet eingerichtet. Erstellen Sie so und dann können wir den Bildschirm zum

7
00:00:45,450 --> 00:00:49,310
Bearbeiten von Produkten als Standard exportieren.

8
00:00:49,390 --> 00:00:55,030
Jetzt hier in der Komponente selbst können wir für den Moment, nur um zu

9
00:00:55,030 --> 00:01:01,990
sehen, dass dies funktioniert, eine Ansicht mit einem Text darin ausgeben, in der wir sagen, dass der Bildschirm

10
00:01:01,990 --> 00:01:07,210
zum Bearbeiten des Produkts und später natürlich hier und jetzt weitere hilfreiche Dinge

11
00:01:07,270 --> 00:01:12,120
ausgeben Um dorthin zu gelangen, müssen wir dies erneut in einem Navigator

12
00:01:13,150 --> 00:01:18,940
registrieren, der Teil des Admin-Navigators ist. Importieren Sie also diesen Bildschirm, importieren Sie den Bildschirm

13
00:01:18,940 --> 00:01:29,060
zum Bearbeiten von Produkten von Bildschirmen, die vom Benutzer bearbeitet werden, und fügen Sie ihn dann hier zum Admin-Navigator hinzu, möglicherweise mit Produkt als Kennung bearbeiten,

14
00:01:29,060 --> 00:01:32,330
zeigen Sie auf den Bildschirm Produkt bearbeiten.

15
00:01:32,330 --> 00:01:37,250
Jetzt sollten wir in der Lage sein, uns allgemein dorthin zu bewegen, aber natürlich müssen wir jetzt eine Navigationsaktion

16
00:01:37,250 --> 00:01:42,320
auslösen, um sie zu erreichen, und das möchte ich auf dem Bildschirm des Benutzerprodukts tun, wenn wir dies auswählen

17
00:01:42,560 --> 00:01:46,060
oder wenn wir auf Bearbeiten klicken, dann möchte ich mach das selbe.

18
00:01:46,220 --> 00:01:50,040
Daher werde ich hier erneut eine Funktion erstellen, damit

19
00:01:50,240 --> 00:02:00,170
ich meinen Code nicht dupliziere, kein Produkt auswähle oder keinen Produkthandler bearbeite. Dies ist eine Funktion, bei der ich erwarte, die ID zu

20
00:02:00,200 --> 00:02:01,420
erhalten, die

21
00:02:01,460 --> 00:02:11,630
ich bearbeiten möchte, also die ID des gewünschten Produkts Zum Bearbeiten und hier möchte ich die Requisitennavigation verwenden, zum Produktbearbeitungsbildschirm navigieren, also zum Bildschirm

22
00:02:11,780 --> 00:02:17,900
mit dieser Kennung, die ich natürlich habe, da dies die Kennung ist, die ich

23
00:02:17,930 --> 00:02:19,330
gerade hier registriert

24
00:02:21,370 --> 00:02:24,580
habe und die Produkt-ID hier weiterleiten möchte.

25
00:02:25,730 --> 00:02:30,150
Die ID, die ich hier in der Funktion als Argument erhalte, wird als Routing-Parameter weitergeleitet. Jetzt ist

26
00:02:30,200 --> 00:02:33,960
der Bearbeitungsprodukt-Handler die Funktion, die hier ausgeführt werden soll, wenn wir auf die Schaltfläche

27
00:02:33,980 --> 00:02:40,850
Bearbeiten klicken. Dort leite ich itemData weiter. Artikel. id und ich machen das gleiche hier in

28
00:02:40,850 --> 00:02:42,790
diesem auf ausgewählten handler natürlich.

29
00:02:45,360 --> 00:02:48,400
Wenn wir uns das ansehen, gehen wir

30
00:02:48,510 --> 00:02:53,630
zurück, Admin, klicken Sie hier, um den Produktbildschirm zu bearbeiten, auch wenn ich

31
00:02:53,640 --> 00:03:00,030
auf die Schaltfläche Bearbeiten klicke, damit das funktioniert. Um nun neue Produkte hinzuzufügen, möchte ich zum selben Bildschirm

32
00:03:00,080 --> 00:03:05,730
wechseln, ohne jedoch eine ID einzugeben. Auf diese Weise können wir herausfinden, ob wir uns in diesem Bearbeitungsproduktbildschirm im Bearbeitungs- oder

33
00:03:05,730 --> 00:03:08,940
Hinzufügungsmodus befinden, indem wir prüfen, ob wir eine ID haben oder nicht.

34
00:03:08,940 --> 00:03:16,560
Um zu diesem Bildschirm zum Hinzufügen von Produkten zu gelangen, können wir ein Aktionselement hinzufügen, also

35
00:03:16,560 --> 00:03:24,280
ein Element zur Kopfzeile hier im Benutzerproduktbildschirm, und das sollte rechts sein, damit ich hier Kopfzeilen hinzufüge.

36
00:03:25,290 --> 00:03:32,530
Dies ist am Ende genau das, was wir hier eingerichtet haben, also werde ich das mit den Header-Schaltflächen kopieren, aber die Kennung

37
00:03:32,530 --> 00:03:40,840
hier könnte hinzugefügt werden und das Symbol sollte md create und ios create sein, um dieses Symbol zu haben, das signalisiert, dass wir im Begriff

38
00:03:40,840 --> 00:03:47,260
sind etwas erstellen und auch hier schalte ich die Schublade nicht um, sondern rufe stattdessen navigieren auf und gehe

39
00:03:47,260 --> 00:03:53,650
zum Bearbeiten des Produkts. Wie ich bereits erwähnt habe, werden wir, ohne hier Parameter zu übergeben, weil wir

40
00:03:53,650 --> 00:03:57,910
ein neues Produkt hinzufügen, mit Sicherheit nicht übergeben eine vorhandene ID hier.

41
00:03:58,970 --> 00:04:06,070
Und wenn dies hinzugefügt wurde, zum Beispiel unter Android, um die Dinge auf dem Admin-Bildschirm zu verwechseln, können wir jetzt

42
00:04:06,430 --> 00:04:09,540
dieses Aktionsleistensymbol drücken, um zum Bildschirm zu gelangen.

43
00:04:09,710 --> 00:04:14,540
Jetzt fehlt hier natürlich der Header und wir werden das beheben, aber bevor wir dies

44
00:04:14,540 --> 00:04:19,120
tun, gibt es noch etwas, das ich beheben möchte. Die Kaffeetasse ist hier unter

45
00:04:19,130 --> 00:04:25,220
iOS tatsächlich abgeschnitten. Sie sehen, dass das G ein wenig abgeschnitten ist Aus und außerdem haben Sie vielleicht früher

46
00:04:25,220 --> 00:04:30,680
bemerkt, dass ich, als ich Artikel auf dem Einkaufswagen hatte und sie entfernte, früher hier ein Minus

47
00:04:31,380 --> 00:04:37,490
hatte. Lassen Sie uns jetzt beide Dinge reparieren. Für die Kaffeetasse oder für

48
00:04:37,490 --> 00:04:46,400
das Abschneiden von Text ist der Grund einfach. In der Produktartikelkomponente hier weisen wir unseren verschiedenen Elementen die Höhe zu, z. B.

49
00:04:46,400 --> 00:04:48,420
hatte das Bild eine Höhe

50
00:04:48,550 --> 00:04:56,090
von 60%, die Details hatten 15, geben wir diese 17 an und ziehen daher zwei Prozentpunkte von den Aktionen ab, damit der Titel

51
00:04:56,080 --> 00:05:00,440
ein wenig hat mehr Platz und das stellt sicher, dass die Kaffeetasse da

52
00:05:00,440 --> 00:05:02,540
ist, das war eine einfache Lösung.

53
00:05:02,540 --> 00:05:05,560
Für den Warenkorb besteht das Problem einfach darin,

54
00:05:05,570 --> 00:05:07,910
dass Javascript hinter den Kulissen bei

55
00:05:07,910 --> 00:05:12,950
der Arbeit mit Gleitkommazahlen nicht die Genauigkeit hat, die Sie sich vielleicht wünschen

56
00:05:12,950 --> 00:05:14,630
würden, und genau

57
00:05:14,630 --> 00:05:16,800
so funktioniert Javascript. Wenn Sie

58
00:05:17,000 --> 00:05:21,910
also zwei Elemente hinzufügen und dann entfernen Bei beiden kann es tatsächlich zu

59
00:05:21,920 --> 00:05:29,580
einem Wert kommen, der an einer Dezimalstelle nicht 0 ist. Was Sie jetzt tun können, um dies auf

60
00:05:29,580 --> 00:05:39,550
dem Warenkorbbildschirm zu beheben, ist hier, wenn Sie den Betrag mit "fest" ausgeben. Sie können tatsächlich Mathematik verwenden, die in Javascript integriert ist. Runden

61
00:05:39,610 --> 00:05:47,830
Sie diesen Wert auf einen festen Wert und multiplizieren Sie ihn mit 100 und danach. Teilen Sie dies durch 100.

62
00:05:47,850 --> 00:05:50,580
Dies stellt sicher, dass Sie nie mit

63
00:05:50,610 --> 00:05:56,420
diesem Minus enden. Dies hat wiederum damit zu tun, wie Javascript diese Gleitkommazahlen intern behandelt.

64
00:05:56,440 --> 00:06:06,210
Wenn wir hier also wieder ein paar Elemente hinzufügen und sie in den Warenkorb legen, sieht dies im Allgemeinen gut aus, sodass unsere Logik immer noch

65
00:06:06,210 --> 00:06:07,700
funktioniert. Wenn wir jetzt

66
00:06:07,710 --> 00:06:13,170
Elemente hier entfernen, sollten wir immer eine Null wie diese erhalten, niemals eine Minus

67
00:06:13,170 --> 00:06:13,740
davor.

68
00:06:13,800 --> 00:06:20,070
Das ist also nur eine winzige Verbesserung in Bezug auf die Ausgabe. Wenn wir diese visuellen Verbesserungen aus dem

69
00:06:20,070 --> 00:06:25,470
Weg räumen, kehren wir zu den Benutzerprodukten zurück und stellen sicher, dass wir jetzt den Bearbeitungs- und

70
00:06:25,470 --> 00:06:27,480
Hinzufügungsbildschirm erreichen können, der ein

71
00:06:27,480 --> 00:06:34,940
und derselbe Bildschirm ist Natürlich zeigen wir dort auch einige Eingaben und laden einige Daten für ein Produkt, die gegebenenfalls bearbeitet werden sollten.