1
00:00:02,380 --> 00:00:08,420
Beginnen wir mit dem Bestätigungsdialog hier im Bildschirm Produkt bearbeiten. Wir können einfach die Alert-API aus React

2
00:00:08,450 --> 00:00:16,490
Native importieren, wodurch wir einen netten Alert anzeigen und dann hier eine neue Methode hinzufügen können. Vielleicht könnten wir das alle

3
00:00:16,490 --> 00:00:22,830
in einer Linie tun, aber einen etwas strukturierteren Code haben, in dem ich meinen Lösch-Handler habe.

4
00:00:23,020 --> 00:00:28,600
Übrigens, wie Sie Ihre Funktionen benennen, liegt ganz bei Ihnen. Ich mag es einfach, wenn dieser Handler hier benannt wird, wenn ich

5
00:00:28,600 --> 00:00:35,950
ihn sozusagen meinen Ereignis-Emittern im jsx-Code zuweise, und dort können wir alert aufrufen. Warnung, um eine Warnung mit dem

6
00:00:35,980 --> 00:00:37,690
Titel "Sind Sie

7
00:00:37,720 --> 00:00:38,960
sicher?"

8
00:00:39,880 --> 00:00:45,670
anzuzeigen. Möchten Sie dieses Element wirklich löschen und dann ein

9
00:00:45,670 --> 00:00:48,940
Array mit allen Schaltflächen, die

10
00:00:48,940 --> 00:00:58,020
wir präsentieren möchten, wobei die Schaltfläche Nummer eins den Text "Nein" und einen Standardstil enthält.

11
00:00:58,060 --> 00:01:02,800
Es gibt nur drei Standardstile oder vorkonfigurierte Stile, aus denen Sie auswählen können, und keinen speziellen Handler

12
00:01:02,800 --> 00:01:03,930
für diese erste Schaltfläche.

13
00:01:04,030 --> 00:01:07,180
Die zweite Schaltfläche hat ja, da möchte

14
00:01:07,190 --> 00:01:10,640
ich einen destruktiven Stil haben, um dies als

15
00:01:10,640 --> 00:01:17,900
hey zu markieren, dies wird etwas löschen und der onPress-Handler hier hält dann am Ende eine Funktion,

16
00:01:17,900 --> 00:01:20,540
die die Löschaktion wirklich auslöst.

17
00:01:20,610 --> 00:01:28,110
Jetzt ist es also der Lösch-Handler, den ich ausführen möchte, wenn wir auf diese Löschschaltfläche klicken, und daher bin ich natürlich in der falschen

18
00:01:28,110 --> 00:01:30,080
Komponente, die ich gerade gesehen habe.

19
00:01:30,210 --> 00:01:31,610
Lassen Sie uns dies

20
00:01:31,800 --> 00:01:33,740
abschneiden, es befindet sich nicht im Bildschirm

21
00:01:33,750 --> 00:01:35,440
zum Bearbeiten von Produkten, wir benötigen dort

22
00:01:35,460 --> 00:01:41,310
keinen Alarmimport, es ist der Bildschirm für Benutzerprodukte, über den ich spreche. Dort müssen wir eine Warnung importieren,

23
00:01:41,700 --> 00:01:47,380
dort sollten wir diesen Handler hinzufügen und jetzt sollte der Löschhandler hier dieser Löschtaste

24
00:01:47,400 --> 00:01:53,730
zugewiesen werden, so dass wir hier nur auf den Löschhandler zeigen können und diese anonyme

25
00:01:53,980 --> 00:02:00,790
Funktion von dort unten abgeschnitten werden kann und sein kann hierher bewegt und diesen onPress-Handler für diese

26
00:02:00,790 --> 00:02:07,320
Schaltfläche ersetzt. Jetzt sollten wir dieses Popup und diesen Bestätigungsdialog erhalten, bevor wir tatsächlich etwas löschen.

27
00:02:07,330 --> 00:02:09,790
Wenn ich also auf Löschen klicke, frage ich jetzt, wenn

28
00:02:09,790 --> 00:02:10,210
ich

29
00:02:10,210 --> 00:02:11,640
Nein drücke, passiert nichts, nur

30
00:02:11,650 --> 00:02:16,060
wenn ich auf Ja klicke, löschen wir dies. Ein kleiner Fehler ist natürlich, dass

31
00:02:16,060 --> 00:02:17,920
die benötigten Artikeldaten verfügbar

32
00:02:20,570 --> 00:02:21,790
sein müssen.

33
00:02:21,830 --> 00:02:24,920
Hier leiten wir also die ID weiter, die wir löschen

34
00:02:24,920 --> 00:02:30,180
möchten. Für den Löschhandler benötigen wir also die ID des Produkts, auf das wir diesen Handler anwenden,

35
00:02:30,410 --> 00:02:35,360
damit hier diese ID verfügbar ist. Dies bedeutet, dass der Löschhandler aufgerufen wird Dort unten müssen

36
00:02:35,360 --> 00:02:37,980
wir sicherstellen, dass es die ID bekommt.

37
00:02:38,510 --> 00:02:40,150
Es gibt also zwei Möglichkeiten, eine anonyme Funktion,

38
00:02:40,400 --> 00:02:46,100
bei der wir den Löschhandler manuell ausführen und itemData weiterleiten. Artikel. ID oder

39
00:02:46,100 --> 00:02:55,000
Alternative dazu, übergeben Sie den Lösch-Handler wie folgt, aber verwenden Sie bind, um alle Argumente, die

40
00:02:55,000 --> 00:03:01,150
diese Funktion erhält, vorzukonfigurieren. Bind benötigt immer einen Wert für dieses Schlüsselwort innerhalb der Funktion, die es ausführen wird. Dort können wir dies einfach

41
00:03:01,150 --> 00:03:04,170
übergeben, es spielt keine Rolle, aber das zweite

42
00:03:04,360 --> 00:03:08,290
Argument ist jetzt das erste Argument, das der Lösch-Handler erhält, also

43
00:03:08,620 --> 00:03:15,640
übergeben wir hier itemData. Artikel. Ich würde. Damit stellen wir sicher, dass

44
00:03:15,640 --> 00:03:22,530
wir tatsächlich Ja drücken können und es wird funktionieren. Wenn wir jetzt hierher zurück zum Administrator gehen, klicken Sie auf Löschen, drücken

45
00:03:22,600 --> 00:03:27,700
Sie Ja, dies funktioniert jetzt wirklich und wenn wir Nein drücken, passiert nichts, Ja löscht es.

46
00:03:27,700 --> 00:03:29,020
Das ist also

47
00:03:29,230 --> 00:03:34,450
das Erste, und um sicherzustellen, dass wir zurück navigieren. Wenn wir dies speichern, müssen wir jetzt

48
00:03:34,750 --> 00:03:41,680
zum Bildschirm zum Bearbeiten des Produkts und dort in unserem Submit-Handler gehen, unabhängig davon, ob wir das Update versenden oder eine

49
00:03:41,680 --> 00:03:51,870
Produktaktion erstellen Ende Ich möchte auch die Requisitennavigation aufrufen. Zurück, um zum vorherigen Bildschirm zurückzukehren. Und wenn wir dies jetzt speichern und zum Administrationsbildschirm gehen und

50
00:03:53,430 --> 00:03:58,920
ich vorerst ein leeres Produkt einreiche, erhalte ich natürlich eine Warnung, aber dies

51
00:04:01,990 --> 00:04:07,750
funktioniert im Allgemeinen, dies geht zurück und wenn ich ein Produkt bearbeite, funktioniert

52
00:04:07,750 --> 00:04:08,890
dies auch.

53
00:04:08,950 --> 00:04:13,470
Damit sind wir nun mit dem gesamten Eingabemanagement fertig. Das verbleibende, was ich jetzt

54
00:04:13,510 --> 00:04:18,920
tun möchte, bevor ich das alles wirklich abgeschlossen habe, ist, dass ich das Produkt ein bisschen

55
00:04:18,920 --> 00:04:20,850
mehr und die Art und

56
00:04:21,040 --> 00:04:26,800
Weise, wie wir es tun, optimieren möchte. Wenn Sie unseren Kartenlook hier mit dem Schatten usw. wiederverwenden,

57
00:04:27,040 --> 00:04:28,270
verwenden wir ihn

58
00:04:28,270 --> 00:04:33,940
in mehreren Komponenten. Wenn Sie feststellen, dass Sie etwas in mehreren Komponenten verwenden, möchten Sie möglicherweise immer

59
00:04:33,940 --> 00:04:35,920
darüber nachdenken, ob Sie dies ein

60
00:04:35,980 --> 00:04:39,370
bisschen mehr optimieren können, und zwar hier Wir haben Optimierungspotential.

61
00:04:39,490 --> 00:04:42,600
Wie können wir dies jedoch optimieren?

62
00:04:42,720 --> 00:04:48,720
Nun, wir könnten hier in unserem UI-Ordner des Komponentenordners, den wir Warenkorb nennen,

63
00:04:49,080 --> 00:04:55,800
eine separate Komponente erstellen. js, wo wir gerade diesen Warenkorb-Look aufbewahren. Eine Wagenkomponente kann

64
00:04:55,800 --> 00:05:05,140
am Ende eine sehr einfache Komponente sein. Wir importieren React von React hier, weil wir eine Komponente erstellen müssen,

65
00:05:05,260 --> 00:05:13,990
und wir importieren einfach so eine Ansicht von React Native. Jetzt erstellen wir hier unsere Warenkorbkomponente, in der wir einfach unsere Requisiten erhalten,

66
00:05:14,030 --> 00:05:21,000
etwas jsx zurückgeben und diese Komponente in das exportieren Obwohl wir auch ein Styling einrichten müssen, da dies

67
00:05:21,000 --> 00:05:23,390
die Kernidee dieser Komponente ist,

68
00:05:23,400 --> 00:05:30,370
geht es darum, uns einige vorkonfigurierte Styles zu geben. Also werde ich meine Stile auch mit Stylesheet konstant

69
00:05:30,680 --> 00:05:31,750
hinzufügen. Erstellen

70
00:05:31,770 --> 00:05:36,710
Sie dort unten und jetzt, was ist der JSX-Code, den ich hier zurückgeben möchte?

71
00:05:36,760 --> 00:05:41,920
Nun, das ist eine Ansicht, eine Ansicht, die tatsächlich alles einschließt, was wir dort

72
00:05:41,950 --> 00:05:46,870
übergeben, also zwischen den Tags meiner Komponente, also nur Kinder darin, aber jetzt

73
00:05:46,930 --> 00:05:53,690
kann diese Ansicht hier ein Standard-Styling erhalten, das ich Cart nennen werde und das sollte seien Sie die Stile,

74
00:05:53,690 --> 00:05:56,090
mit denen ich sonst herum kopiere.

75
00:05:56,110 --> 00:06:01,780
Hier ist mein Wagenstil in dieser Wagenkomponente genau das, was ich hier habe, das Produktelement, es

76
00:06:01,780 --> 00:06:02,880
ist dieses

77
00:06:02,900 --> 00:06:09,540
Schattenmaterial hier, die Höhe, der Randradius und die Hintergrundfarbe. Sie können das alles abschneiden und hier in den Einkaufswagen

78
00:06:09,540 --> 00:06:10,260
legen.

79
00:06:11,580 --> 00:06:16,890
Um dies noch ein wenig konfigurieren zu können, werde ich dies tatsächlich verbessern

80
00:06:16,890 --> 00:06:27,540
und den Stil auf ein Objekt festlegen, in dem ich die Werte meines Stilwagens und alle Werte, die ich hier auf der Stil-Requisite erhalte, wie folgt zusammenführe.

81
00:06:27,540 --> 00:06:32,970
Jetzt können wir sogar eine Stil-Requisite festlegen, wenn wir unseren Warenkorb verwenden und

82
00:06:32,970 --> 00:06:39,240
unsere eigenen Stile übergeben, die mit diesen Standardkartenstilen zusammengeführt werden, da ich jetzt den Warenkorb

83
00:06:39,300 --> 00:06:50,780
hier im Produktartikel verwenden kann, indem ich beispielsweise den Warenkorb aus importiere , und jetzt eine Ebene höher in den UI-Ordner, in die Warenkorbdatei und ersetzen Sie

84
00:06:51,000 --> 00:06:52,460
diese Ansicht hier,

85
00:06:52,500 --> 00:06:54,830
diese äußere Ansicht durch Karte

86
00:06:54,860 --> 00:07:01,410
und ersetzen Sie daher natürlich auch das schließende Tag und geben Sie hier noch meine Produktspezifikationen

87
00:07:01,410 --> 00:07:08,360
ein, also diese Höhe und den Rand .

88
00:07:08,360 --> 00:07:11,570
Dies wird mit den anderen Karten-Looks zusammengeführt und alles zwischen den öffnenden

89
00:07:11,570 --> 00:07:15,030
und schließenden Tags der Karte funktioniert einfach. Ich gebe dies hier mit Hilfe

90
00:07:15,020 --> 00:07:18,820
von Requisitenkindern auf meine Karte weiter. Das Gleiche gilt für

91
00:07:18,830 --> 00:07:25,280
den Bestellartikel. Dort müssen wir nur noch die Karte aus importieren und jetzt in den UI-Ordner gehen, um hier

92
00:07:26,240 --> 00:07:29,690
zu kardieren und dann anstelle dieser Ansicht, dieser äußeren Ansicht

93
00:07:29,700 --> 00:07:34,570
hier, eine Karte zu verwenden, diese durch eine Karte zu ersetzen und loszuwerden Diese

94
00:07:34,590 --> 00:07:39,330
Kartenstile hier, das Schattenmaterial, die Höhe, der Randradius und die Hintergrundfarbe behalten nur

95
00:07:39,330 --> 00:07:45,640
die speziellen Stile bei, in denen Sie zusammenführen möchten. Und jetzt ist der letzte Ort, an dem wir dies

96
00:07:45,660 --> 00:07:49,440
verwenden können, der Warenkorbbildschirm. Dort habe ich auch meine Zusammenfassung, die diese Kartenstile verwendet.

97
00:07:49,770 --> 00:07:56,870
Nun, wir können die Kartenkomponente wieder aus dem Komponentenordner, dem UI-Ordner dort

98
00:07:56,920 --> 00:08:04,930
und dort, aus dem Warenkorb importieren. js-Datei und verwenden Sie jetzt die Kartenkomponente anstelle der Ansicht an

99
00:08:05,320 --> 00:08:07,290
der Stelle, an der diese

100
00:08:07,300 --> 00:08:11,380
Kartenstile angezeigt werden sollen. Hier also die Ansicht mit den Zusammenfassungsstilen.

101
00:08:11,380 --> 00:08:16,590
Ich werde diese durch die Karte ersetzen. Bei den Zusammenfassungsstilen behalten wir alles

102
00:08:16,650 --> 00:08:22,170
bei, was für diesen Bildschirm oder diese Komponente spezifisch ist, aber wir können die Schattenfarbe, den

103
00:08:22,170 --> 00:08:27,260
Schattenradius, die Höhe und die Hintergrundfarbe des Randradius entfernen, die alle entfernt werden können.

104
00:08:27,290 --> 00:08:32,480
Speichern wir das jetzt und Sie werden sehen, dass die App natürlich immer noch

105
00:08:32,480 --> 00:08:33,800
funktioniert und genauso

106
00:08:34,630 --> 00:08:41,320
aussieht wie zuvor, wenn ich dies zum Beispiel in den Warenkorb lege und dies bestelle und mir

107
00:08:41,320 --> 00:08:48,760
meine Bestellungen ansehe, sieht alles so aus So wie es früher war, aber jetzt mit einem etwas optimaleren Code,

108
00:08:48,760 --> 00:08:53,610
bei dem wir unsere Stile tatsächlich wiederverwenden und eine separate Präsentationskomponente für

109
00:08:53,650 --> 00:08:59,170
sie haben, damit unsere anderen Komponenten etwas schlanker sein können und wir uns nicht

110
00:08:59,170 --> 00:09:05,710
als wiederholen oft beim Einrichten dieses Warenkorbs aussehen. Ein weiterer Vorteil ist, dass wir keine Fehler eingeben können. Wenn wir

111
00:09:05,710 --> 00:09:11,220
den Schattenradius in einer Komponente auf 8 und in einer anderen auf 10 setzen, sieht unsere App möglicherweise etwas inkonsistent aus.

112
00:09:11,260 --> 00:09:17,830
Wir vermeiden dies, indem wir einige zentrale, auf das Styling fokussierte Komponenten haben, die diese Kernstile einrichten, die wir dann in

113
00:09:17,830 --> 00:09:20,410
anderen Komponenten verwenden, wie wir es hier tun.