1
00:00:02,380 --> 00:00:08,420
Cominciamo con la finestra di dialogo di conferma qui nella schermata di modifica del prodotto. Possiamo semplicemente importare l'API di avviso da

2
00:00:08,450 --> 00:00:16,490
React Native che ci consente di mostrare un bel avviso e quindi aggiungere un nuovo metodo qui forse, potremmo farlo tutti in

3
00:00:16,490 --> 00:00:22,830
linea ma per avere un codice un po 'più strutturato dove ho il mio gestore di eliminazione.

4
00:00:23,020 --> 00:00:28,600
A proposito, il modo in cui nominate le vostre funzioni dipende totalmente da voi, mi piace solo questo gestore nominare qui se lo assegno ai

5
00:00:28,600 --> 00:00:35,950
miei emettitori di eventi nel codice jsx, per così dire e lì possiamo chiamare alert. avviso per mostrare un avviso con il

6
00:00:35,980 --> 00:00:37,690
titolo del messaggio

7
00:00:37,720 --> 00:00:38,960
sicuro,

8
00:00:39,880 --> 00:00:45,670
vuoi davvero eliminare questo elemento e quindi un array con

9
00:00:45,670 --> 00:00:48,940
tutti i pulsanti che vogliamo presentare

10
00:00:48,940 --> 00:00:58,020
in cui il pulsante numero uno ha un testo di no e uno stile di default.

11
00:00:58,060 --> 00:01:02,800
Esistono solo tre stili predefiniti o stili preconfigurati tra cui scegliere e nessun gestore speciale su

12
00:01:02,800 --> 00:01:03,930
questo primo pulsante.

13
00:01:04,030 --> 00:01:07,180
Il secondo pulsante ha sì, lì voglio

14
00:01:07,190 --> 00:01:10,640
avere uno stile distruttivo per contrassegnarlo come ehi

15
00:01:10,640 --> 00:01:17,900
questo eliminerà qualcosa e il gestore onPress qui è quindi alla fine con una funzione che

16
00:01:17,900 --> 00:01:20,540
invierà davvero l'azione di eliminazione.

17
00:01:20,610 --> 00:01:28,110
Quindi ora è il gestore di eliminazione che voglio eseguire quando facciamo clic su quel pulsante di eliminazione e quindi ovviamente sono nel

18
00:01:28,110 --> 00:01:30,080
componente sbagliato che ho appena visto.

19
00:01:30,210 --> 00:01:31,610
Tagliamo questo, non è

20
00:01:31,800 --> 00:01:33,740
all'interno della schermata di modifica del prodotto,

21
00:01:33,750 --> 00:01:35,440
non abbiamo bisogno dell'importazione degli avvisi

22
00:01:35,460 --> 00:01:41,310
lì, è la schermata dei prodotti dell'utente di cui sto parlando. Lì dobbiamo importare l'avviso, lì dovremmo aggiungere

23
00:01:41,700 --> 00:01:47,380
questo gestore e ora il gestore di eliminazione dovrebbe essere assegnato a questo pulsante

24
00:01:47,400 --> 00:01:53,730
di eliminazione qui, quindi qui possiamo semplicemente puntare al gestore di eliminazione e questa funzione anonima può

25
00:01:53,980 --> 00:02:00,790
essere tagliata da laggiù e può essere spostato qui e sostituisci questo gestore onPress per questo pulsante e

26
00:02:00,790 --> 00:02:07,320
ora con quello, dovremmo ottenere questo popup, questa finestra di dialogo di conferma prima di eliminare effettivamente qualcosa.

27
00:02:07,330 --> 00:02:09,790
Quindi, se faccio clic su Elimina, ora sto chiedendo,

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

29
00:02:10,210 --> 00:02:11,640
premo no, non succede nulla,

30
00:02:11,650 --> 00:02:16,060
solo se faccio clic su Sì lo eliminiamo. Il piccolo errore ovviamente è che i

31
00:02:16,060 --> 00:02:17,920
dati dell'articolo di cui abbiamo bisogno

32
00:02:20,570 --> 00:02:21,790
devono essere disponibili.

33
00:02:21,830 --> 00:02:24,920
Quindi qui inoltriamo l'ID che vogliamo eliminare, quindi in realtà

34
00:02:24,920 --> 00:02:30,180
per il gestore di eliminazione, abbiamo bisogno dell'ID del prodotto a cui stiamo applicando questo gestore in

35
00:02:30,410 --> 00:02:35,360
modo che qui ho quell'ID disponibile e ciò significa che quando viene chiamato il gestore di

36
00:02:35,360 --> 00:02:37,980
eliminazione laggiù, dobbiamo assicurarci che ottenga l'ID.

37
00:02:38,510 --> 00:02:40,150
Quindi ci sono due modi per farlo, una funzione

38
00:02:40,400 --> 00:02:46,100
anonima in cui eseguiamo manualmente il gestore di eliminazione e inoltriamo itemData. articolo. id o alternativa

39
00:02:46,100 --> 00:02:55,000
a questo, passando il gestore di eliminazione in questo modo, ma usa bind per preconfigurare tutti gli argomenti

40
00:02:55,000 --> 00:03:01,150
che questa funzione otterrà. Bind ha sempre bisogno di valore per questa parola chiave all'interno della funzione che eseguirà. Lì possiamo semplicemente passare questo,

41
00:03:01,150 --> 00:03:04,170
non importa, ma il secondo argomento ora è

42
00:03:04,360 --> 00:03:08,290
il primo argomento che riceverà il gestore di eliminazione, quindi

43
00:03:08,620 --> 00:03:15,640
qui passiamo itemData. articolo. id. Ora con ciò, ci

44
00:03:15,640 --> 00:03:22,530
assicuriamo di poter effettivamente premere Sì e funzionerà, se ora torniamo qui ad admin, facciamo clic su Elimina, premi

45
00:03:22,600 --> 00:03:27,700
Sì, ora funziona davvero e se premiamo no, non succede nulla, sì lo elimina.

46
00:03:27,700 --> 00:03:29,020
Quindi questa è

47
00:03:29,230 --> 00:03:34,450
la prima cosa e per assicurarci di tornare indietro, se salviamo questo, ora dobbiamo andare alla schermata

48
00:03:34,750 --> 00:03:41,680
di modifica del prodotto e lì nel nostro gestore di invio, non importa se inviamo l'aggiornamento o creiamo un'azione del prodotto, nella fine

49
00:03:41,680 --> 00:03:51,870
Voglio anche chiamare la navigazione degli oggetti di scena tornare indietro per tornare alla schermata precedente. E se ora lo salviamo e andiamo nella schermata di

50
00:03:53,430 --> 00:03:58,920
amministrazione e per ora invio un prodotto vuoto, ovviamente ricevo un

51
00:04:01,990 --> 00:04:07,750
avviso ma generalmente funziona, questo torna indietro e se modifico un prodotto,

52
00:04:07,750 --> 00:04:08,890
funziona anche.

53
00:04:08,950 --> 00:04:13,470
Quindi ora con questo, abbiamo finito per quanto riguarda tutta la gestione degli input,

54
00:04:13,510 --> 00:04:18,920
la cosa rimanente che ora voglio fare prima di finire davvero tutto questo è ora che voglio

55
00:04:18,920 --> 00:04:20,850
ottimizzare un po 'di più l'articolo

56
00:04:21,040 --> 00:04:26,800
del prodotto e il modo in cui' riutilizzando la nostra scheda guarda qui con l'ombra e così via

57
00:04:27,040 --> 00:04:28,270
perché lo stiamo

58
00:04:28,270 --> 00:04:33,940
usando in più componenti e se ti ritrovi a utilizzare qualcosa in più componenti, potresti sempre pensare a

59
00:04:33,940 --> 00:04:35,920
come ottimizzare questo un po 'di

60
00:04:35,980 --> 00:04:39,370
più e in effetti qui , abbiamo un potenziale di ottimizzazione.

61
00:04:39,490 --> 00:04:42,600
Quindi, come possiamo ottimizzare questo però?

62
00:04:42,720 --> 00:04:48,720
Bene, potremmo creare un componente separato qui nella nostra cartella UI della cartella

63
00:04:49,080 --> 00:04:55,800
componenti che chiamiamo carrello. js, dove abbiamo appena memorizzato questo aspetto del carrello. Un componente carrello

64
00:04:55,800 --> 00:05:05,140
può essere un componente molto semplice alla fine. Importiamo React da React qui perché dobbiamo creare un componente e importiamo una

65
00:05:05,260 --> 00:05:13,990
vista da React Native, proprio così e ora qui creiamo il nostro componente carrello dove semplicemente otteniamo i nostri oggetti di scena, restituiamo un

66
00:05:14,030 --> 00:05:21,000
po 'di jsx ed esportiamo questo componente nel Alla fine, anche se dovremo anche impostare un po 'di styling

67
00:05:21,000 --> 00:05:23,390
perché questa è l'idea principale dietro

68
00:05:23,400 --> 00:05:30,370
questo componente, si tratta di darci alcuni stili preconfigurati. Quindi aggiungerò anche i miei stili costanti con

69
00:05:30,680 --> 00:05:31,750
Stylesheet. creare

70
00:05:31,770 --> 00:05:36,710
laggiù e ora, qual è il codice jsx che voglio restituire qui?

71
00:05:36,760 --> 00:05:41,920
Bene, questa è una vista, una vista che avvolgerà effettivamente qualsiasi cosa passiamo lì,

72
00:05:41,950 --> 00:05:46,870
quindi tra i tag del mio componente, quindi propaga solo i bambini lì

73
00:05:46,930 --> 00:05:53,690
dentro ma ora quella vista può avere uno stile predefinito qui che chiamerò carrello e che dovrebbe essere

74
00:05:53,690 --> 00:05:56,090
gli stili con cui altrimenti copierò.

75
00:05:56,110 --> 00:06:01,780
Quindi qui il mio stile di carrello in questo componente carrello è esattamente quello che ho qui, l'articolo del prodotto,

76
00:06:01,780 --> 00:06:02,880
è questa roba

77
00:06:02,900 --> 00:06:09,540
ombre qui, l'elevazione, il raggio del bordo e il colore di sfondo. Puoi tagliare tutto questo e spostarlo nel carrello

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

79
00:06:11,580 --> 00:06:16,890
Ora, per essere ancora in grado di configurarlo un po ', in realtà lo

80
00:06:16,890 --> 00:06:27,540
migliorerò e imposterò lo stile su un oggetto in cui unirò i miei valori nel carrello degli stili e tutti i valori che ottengo qui sullo stile, come questo.

81
00:06:27,540 --> 00:06:32,970
Quindi ora possiamo anche impostare un puntello di stile quando utilizziamo il nostro carrello

82
00:06:32,970 --> 00:06:39,240
e passiamo nei nostri stili che verranno uniti a questi stili di carte predefiniti perché questo ora

83
00:06:39,300 --> 00:06:50,780
mi consente di utilizzare il carrello qui nell'articolo del prodotto, ad esempio importando il carrello da , e ora passa di un livello nella cartella UI, nel file del carrello

84
00:06:51,000 --> 00:06:52,460
e sostituisci qui

85
00:06:52,500 --> 00:06:54,830
questa vista, questa vista esterna con

86
00:06:54,860 --> 00:07:01,410
la carta e ovviamente sostituisce anche il tag di chiusura e passa ancora nelle specifiche del mio

87
00:07:01,410 --> 00:07:08,360
prodotto qui, quindi questa altezza e il margine .

88
00:07:08,360 --> 00:07:11,570
Questo si fonderà con gli altri aspetti della carta e tutto tra i

89
00:07:11,570 --> 00:07:15,030
tag di apertura e chiusura della carta funzionerà, lo passo nella mia carta qui con

90
00:07:15,020 --> 00:07:18,820
l'aiuto di oggetti di scena per bambini. Ora lo stesso per

91
00:07:18,830 --> 00:07:25,280
l'articolo dell'ordine, lì dobbiamo solo importare la carta e ora andare nella cartella dell'interfaccia utente, cardare qui e

92
00:07:26,240 --> 00:07:29,690
quindi utilizzare card invece di quella vista, quella vista

93
00:07:29,700 --> 00:07:34,570
esterna qui, sostituirla con una carta e sbarazzarsi di questi stili di carte qui,

94
00:07:34,590 --> 00:07:39,330
le ombre, l'elevazione, il raggio del bordo e il colore di sfondo e

95
00:07:39,330 --> 00:07:45,640
mantengono solo gli stili speciali in cui vuoi unirti. E ora l'ultima cosa, l'ultimo posto dove possiamo usare questo è lo

96
00:07:45,660 --> 00:07:49,440
schermo del carrello, lì ho anche il mio riassunto che usa questi stili di carte.

97
00:07:49,770 --> 00:07:56,870
Bene, ancora una volta, possiamo importare il componente della scheda dalla cartella dei componenti, la

98
00:07:56,920 --> 00:08:04,930
cartella UI qua e là, dal carrello. js file e ora usa il componente card invece della vista

99
00:08:05,320 --> 00:08:07,290
nel punto in cui vogliamo

100
00:08:07,300 --> 00:08:11,380
questi stili di card, quindi qui sarebbe la vista che aveva gli

101
00:08:11,380 --> 00:08:16,590
stili di riepilogo, lo sostituirò con card. E negli stili di riepilogo, manteniamo tutto

102
00:08:16,650 --> 00:08:22,170
ciò che è specifico per questa schermata o per questo componente, ma possiamo eliminare il colore dell'ombra, il

103
00:08:22,170 --> 00:08:27,260
raggio dell'ombra, l'elevazione, il colore di sfondo del raggio del bordo, che possono essere tutti rimossi.

104
00:08:27,290 --> 00:08:32,480
Ora salviamolo e vedrai che ovviamente l'app funziona ancora e ha lo stesso aspetto

105
00:08:32,480 --> 00:08:33,800
di prima se

106
00:08:34,630 --> 00:08:41,320
ad esempio aggiungo questo al carrello e lo ordino e guardo i miei ordini, tutto sembra il come

107
00:08:41,320 --> 00:08:48,760
prima, ma ora lo fa con un po 'di un codice più ottimale in cui riutilizziamo effettivamente i nostri stili

108
00:08:48,760 --> 00:08:53,610
e abbiamo un componente di presentazione separato per loro in modo che

109
00:08:53,650 --> 00:08:59,170
i nostri altri componenti possano essere un po' più snelli e non ci ripetiamo

110
00:08:59,170 --> 00:09:05,710
come spesso quando si configura l'aspetto del carrello. Un altro vantaggio è che non possiamo sbagliare, se impostiamo il

111
00:09:05,710 --> 00:09:11,220
raggio dell'ombra su 8 in un componente e 10 in un altro, la nostra app potrebbe apparire leggermente incoerente.

112
00:09:11,260 --> 00:09:17,830
Lo evitiamo avendo alcuni componenti focalizzati sullo styling centrale che impostano questi stili di base che poi utilizziamo

113
00:09:17,830 --> 00:09:20,410
in altri componenti mentre lo facciamo qui.