1 00:00:02,290 --> 00:00:08,230 Ora con quel contenitore di input definito e con un paio di nuovi stili coperti, 2 00:00:08,270 --> 00:00:12,580 possiamo fare qualcosa che ho detto che sarebbe sempre una buona 3 00:00:12,640 --> 00:00:16,380 idea, possiamo dividere la nostra applicazione in più componenti. 4 00:00:16,600 --> 00:00:17,800 Questo aspetto qui, questo 5 00:00:17,800 --> 00:00:24,100 aspetto del contenitore di input, questo aspetto della carta è probabilmente qualcosa che vogliamo usare anche in altre parti 6 00:00:24,100 --> 00:00:24,890 dell'applicazione. 7 00:00:25,060 --> 00:00:28,450 Potremmo avere diversi articoli che vogliamo presentare in tale 8 00:00:28,450 --> 00:00:32,680 carta, considera che stai costruendo un negozio online in cui hai 9 00:00:32,680 --> 00:00:39,160 ogni prodotto in tale carta nella schermata panoramica. Ora, per evitare di ripetere ripetutamente questa definizione di 10 00:00:39,160 --> 00:00:45,130 stile, possiamo esternalizzarla in un componente separato, un componente che non ha molta logica in esso ma 11 00:00:45,160 --> 00:00:46,950 che controlla lo stile 12 00:00:47,080 --> 00:00:53,050 del suo contenuto, quindi un puro componente di presentazione. Tecnicamente è ancora un normale componente React e quindi creerò un nuovo 13 00:00:53,050 --> 00:00:58,450 file qui nella cartella dei componenti e lo nominerò card. Il nome dipende da te, ma è questo tipico 14 00:00:58,450 --> 00:00:59,400 aspetto di una 15 00:00:59,410 --> 00:01:01,510 carta, quindi mi sembra un nome adatto. 16 00:01:02,220 --> 00:01:11,290 Ora qui come sempre, importa React da React e quindi importa anche la vista da React Native qui e quindi crea il componente 17 00:01:11,290 --> 00:01:20,830 della carta, un componente funzionale come questo che alla fine esporti come predefinito e ovviamente poiché si tratta solo di presentazione qui, noi Avrai 18 00:01:21,310 --> 00:01:22,900 bisogno del foglio 19 00:01:22,900 --> 00:01:28,630 di stile per creare un oggetto di stile perché quello sarà l'elemento centrale di 20 00:01:28,630 --> 00:01:31,120 questo componente, dovrebbe essere lì per 21 00:01:31,120 --> 00:01:36,200 avvolgere se stesso attorno a qualsiasi contenuto e applicare solo uno stile generale. 22 00:01:37,270 --> 00:01:42,600 Quindi ora vado alla schermata di avvio del gioco e prenderò tutti gli stili qui dal contenitore di input, 23 00:01:42,700 --> 00:01:49,180 li copierò da lì e li aggiungerò invece alla scheda. Qui aggiungerò una nuova proprietà della carta e 24 00:01:49,180 --> 00:01:49,790 userò 25 00:01:51,220 --> 00:01:54,880 i miei stili qui e all'interno del componente della carta, 26 00:01:55,020 --> 00:01:59,670 avrò un markup molto semplice per così dire, un codice jsx molto semplice. 27 00:01:59,670 --> 00:02:05,900 È solo una vista che ritorno qui che dovrebbe essere racchiusa tra oggetti di scena per bambini, oggetti di 28 00:02:05,910 --> 00:02:11,880 scena per bambini è quel supporto speciale in React che è fondamentalmente il contenuto che passi tra i 29 00:02:11,880 --> 00:02:18,570 tag di apertura e chiusura del tuo componente personalizzato. Quindi può avvolgere se stesso attorno a qualsiasi contenuto perché 30 00:02:18,570 --> 00:02:25,400 l'unico obiettivo di questo componente della carta è applicare uno stile al contenitore circostante e lo facciamo aggiungendo qui la carta degli stili. 31 00:02:25,510 --> 00:02:32,610 Ora c'è solo una cosa, ci sono alcuni stili qui che probabilmente non dovrebbero essere impostati dall'interno della 32 00:02:32,610 --> 00:02:33,790 carta, non 33 00:02:33,810 --> 00:02:41,580 tutte le carte potrebbero avere questa larghezza o larghezza massima e non tutte le carte dovrebbero centrare il suo contenuto. 34 00:02:41,580 --> 00:02:47,220 Quindi taglierò questi tre elementi da lì e avrò solo l'ombra e l'imbottitura installati 35 00:02:47,220 --> 00:02:50,890 qui e voglio renderlo un po 'più flessibile. 36 00:02:50,970 --> 00:02:57,780 Oltre agli stili di carte, sarebbe bello se potessimo anche assegnare i nostri stili dall'esterno 37 00:02:57,780 --> 00:03:07,440 e magari anche scavalcare alcuni degli stili di carte. Possiamo farlo passando un nuovo oggetto al puntello di stile e distribuendo 38 00:03:07,530 --> 00:03:13,730 tutte le proprietà, tutte le coppie chiave-valore del nostro stile di carte qui in questo nuovo oggetto. 39 00:03:13,800 --> 00:03:20,400 Questo è l'operatore spread, una moderna funzione Javascript che estrae tutte le coppie chiave-valore di un oggetto da 40 00:03:20,460 --> 00:03:23,910 quell'oggetto e lo aggiunge a un nuovo oggetto circostante. 41 00:03:24,150 --> 00:03:28,170 Quindi copiamo tutti gli stili definiti laggiù in questo nuovo oggetto 42 00:03:28,170 --> 00:03:34,170 e lo sto facendo in modo da poter aggiungere qui un'altra coppia chiave-valore o un'altra serie di coppie 43 00:03:34,170 --> 00:03:41,370 chiave-valore in cui prendo tutti gli stili definiti negli stili di oggetti di scena, quindi nel prop stile ho passato al 44 00:03:41,370 --> 00:03:42,090 mio 45 00:03:42,090 --> 00:03:48,060 componente personalizzato, prendo tutte le coppie chiave-valore definite lì e le unisco in questo oggetto e, dato 46 00:03:48,240 --> 00:03:53,760 che faccio questo secondo, questo sostituirà qualsiasi coppia chiave-valore impostata nella scheda stili, in modo che 47 00:03:53,760 --> 00:03:56,700 possiamo sovrascrivere qualsiasi stile impostato dall'esterno quando utilizziamo il 48 00:03:56,700 --> 00:04:02,100 nostro componente e quando aggiungiamo altri stili all'esterno del componente, lo uniremo e lo considereremo 49 00:04:02,140 --> 00:04:08,160 e con ciò possiamo anche assegnare i nostri stili dall'esterno del componente scheda quando utilizziamo il componente scheda 50 00:04:08,160 --> 00:04:12,730 e l'utilizzo del componente scheda è qualcosa che avrebbe senso come passaggio successivo. 51 00:04:12,750 --> 00:04:20,040 Quindi andiamo a queste schermate di avvio e importiamo le carte dalla cartella dei componenti e lì dalla cartella delle 52 00:04:20,040 --> 00:04:28,220 carte e sostituiamo la vista del nostro contenitore di input qui con la carta, come questa, proprio come questa, con i tag 53 00:04:28,220 --> 00:04:29,920 di apertura e chiusura. 54 00:04:29,930 --> 00:04:35,420 Ora di nuovo, voglio impostare i miei stili, voglio impostare la mia larghezza, larghezza massima e allineare 55 00:04:35,510 --> 00:04:39,040 gli elementi, quindi terrò il contenitore di input nel foglio 56 00:04:39,320 --> 00:04:46,030 di stile laggiù ma ora mi libererò di tutti gli altri stili lì dentro, tutti gli stili che sono ora impostati 57 00:04:46,100 --> 00:04:46,650 nella 58 00:04:46,790 --> 00:04:54,920 scheda in modo da mantenere solo la larghezza e l'allineamento qui e quindi aggiungerlo qui alla scheda sul puntello di stile che è accettato o 59 00:04:54,980 --> 00:05:01,280 che ha un effetto perché nel componente della scheda, è quel puntello di stile che Mi unisco agli altri miei 60 00:05:01,280 --> 00:05:10,250 stili, quindi per quel puntello di stile, indicherò il contenitore di input degli stili. Ora, se lo salviamo, ricevo un errore, l'oggetto 61 00:05:10,250 --> 00:05:12,330 non è una 62 00:05:12,350 --> 00:05:17,350 funzione vicino al foglio di stile nativo di React. 63 00:05:17,420 --> 00:05:24,250 Quindi nella carta. file js come indica qui, qualcosa non va, mi dà anche il numero 64 00:05:24,260 --> 00:05:30,890 di riga, è la riga 10, questo è ciò che questo numero qui significa e sì, il mio problema qui è che uso un foglio di 65 00:05:30,920 --> 00:05:31,640 stile come 66 00:05:31,640 --> 00:05:35,760 questo, è sbagliato, invece dobbiamo chiamare Stylesheet . creare per definire i nostri stili, quindi questa 67 00:05:35,780 --> 00:05:37,010 è la sintassi giusta. 68 00:05:37,010 --> 00:05:42,240 Quindi è un errore di sintassi, non tecnicamente un errore di sintassi ma sto usando l'oggetto del foglio di stile in modo errato. 69 00:05:42,410 --> 00:05:46,430 Quindi è un errore da parte mia, il messaggio di errore ci ha aiutato in 70 00:05:46,430 --> 00:05:52,420 questo e ora abbiamo lo stesso aspetto di prima ma abbiamo quella carta riutilizzabile che ora possiamo usare in qualsiasi posto dove 71 00:05:52,430 --> 00:05:55,280 vogliamo avere esattamente questo aspetto con le ombre e presto.