1 00:00:04,540 --> 00:00:11,110 Gli stili in linea sono molto facili da applicare, ma il loro svantaggio è che più complessa diventa la 2 00:00:11,110 --> 00:00:18,260 tua app e la tua configurazione diventa, il tuo componente diventa, più difficile è seguire insieme a tutti questi stili in linea. 3 00:00:18,370 --> 00:00:24,040 Avrai un sacco di codice lassù, nel tuo codice jsx e può essere difficile leggerlo, 4 00:00:24,040 --> 00:00:24,720 capirlo. 5 00:00:24,870 --> 00:00:27,870 Pertanto, sebbene sia possibile utilizzare gli stili incorporati, in 6 00:00:27,940 --> 00:00:32,740 realtà si consiglia di utilizzare un oggetto foglio di stile ed è esattamente ciò che 7 00:00:32,740 --> 00:00:33,820 viene creato laggiù. 8 00:00:33,820 --> 00:00:39,120 Questo usa un foglio di stile che è una classe alla fine fornita da React 9 00:00:39,130 --> 00:00:46,660 Native, motivo per cui lo importiamo da lì e questo alla fine crea un oggetto Javascript che contiene tutta la configurazione dello stile. 10 00:00:46,660 --> 00:00:51,940 La differenza con un oggetto Javascript vaniglia che potresti anche creare da solo 11 00:00:51,940 --> 00:00:59,590 in questo modo è semplicemente quel foglio di stile. create potrebbe in futuro applicare anche alcune ottimizzazioni delle prestazioni e applicare i tuoi 12 00:00:59,590 --> 00:01:01,530 stili in modo più efficiente alla fine. 13 00:01:01,600 --> 00:01:07,480 Pertanto, dovresti usarlo perché non perdi nulla, ma in futuro potresti 14 00:01:07,540 --> 00:01:12,190 beneficiare di ulteriori ottimizzazioni. In questo momento, quando sto registrando questo, non c'è 15 00:01:12,190 --> 00:01:17,800 alcuna differenza, ma di nuovo dovresti usare il foglio di stile. crea perché non danneggerà e potresti ottenere ulteriori 16 00:01:17,800 --> 00:01:22,120 ottimizzazioni delle prestazioni in futuro. Un altro vantaggio dell'utilizzo del foglio di 17 00:01:22,120 --> 00:01:28,150 stile è che ciò aggiungerà automaticamente un po 'di convalida, il che significa che se si utilizza una proprietà 18 00:01:28,150 --> 00:01:33,550 di stile errata o un valore errato, React Native lo rileverà e genererà un errore che semplifica 19 00:01:33,550 --> 00:01:35,380 semplicemente l'individuazione errori del genere, 20 00:01:35,470 --> 00:01:39,370 se non ci fosse la validazione, fallirebbe in silenzio, semplicemente non applicherebbe 21 00:01:39,370 --> 00:01:45,160 lo stile e potresti non vederlo immediatamente o vedrai che lo stile non è corretto ma non capisci 22 00:01:45,160 --> 00:01:48,070 perché non funziona, quindi questa convalida integrata è un 23 00:01:48,070 --> 00:01:53,950 altro vantaggio dell'utilizzo di quell'oggetto foglio di stile qui. Per creare, passi un oggetto Javascript come argomento, 24 00:01:54,040 --> 00:01:56,680 quindi l'argomento che passi qui è un 25 00:01:56,680 --> 00:02:01,450 oggetto Javascript e in quell'oggetto, ora puoi definire i tuoi stili e non 26 00:02:01,450 --> 00:02:07,000 lo fai aggiungendo il padding 10 perché non sarebbe chiaro dove questo dovrebbe essere applicato, invece 27 00:02:07,000 --> 00:02:08,020 di usare 28 00:02:08,020 --> 00:02:15,280 qualsiasi nome di proprietà di tua scelta, come ad esempio schermo, per impostare lo stile per la nostra visione generale dello 29 00:02:15,370 --> 00:02:16,810 schermo, quindi per questo 30 00:02:16,810 --> 00:02:21,040 livello superiore di te qui e avresti potuto scegliere qualsiasi nome tu 31 00:02:21,040 --> 00:02:26,490 voglia qui, questo non deve essere schermo. Qui, ora hai un oggetto Javascript 32 00:02:26,560 --> 00:02:30,610 nidificato, quindi il valore per questa proprietà è un altro 33 00:02:30,610 --> 00:02:33,800 oggetto Javascript e lì, ad esempio, imposti il 34 00:02:33,820 --> 00:02:37,630 padding 50, quindi anche lo stile che abbiamo avuto lassù. 35 00:02:37,700 --> 00:02:40,510 Ora possiamo rimuovere quello stile qui, ho ancora 36 00:02:40,520 --> 00:02:45,980 la proprietà style ma non ho più l'oggetto style inline e invece qui, ora punto gli 37 00:02:46,010 --> 00:02:52,120 stili che è questa costante che contiene il nostro oggetto foglio di stile, io punto gli stili e 38 00:02:52,150 --> 00:02:58,430 poi con punto, indico lo stile dello schermo ed è quello che volevo dire, puoi scegliere qualsiasi nome tu 39 00:02:58,430 --> 00:03:00,090 voglia qui, se avessi 40 00:03:00,170 --> 00:03:06,440 chiamato questa radice, allora dovresti semplicemente usare la radice lassù. Quindi puoi usare qualsiasi nome tu voglia, devi solo 41 00:03:06,440 --> 00:03:07,160 assicurarti 42 00:03:07,160 --> 00:03:12,550 che i nomi che usi laggiù incontrino i nomi che usi qui e ora 43 00:03:12,570 --> 00:03:18,540 dice a React Native che questa vista dovrebbe avere gli stili definiti per lo schermo laggiù. 44 00:03:18,650 --> 00:03:20,990 Puoi fare lo stesso per il nostro contenitore di input diciamo, 45 00:03:20,990 --> 00:03:25,860 ancora una volta questo nome dipende totalmente da te, contenitore di input. Qui prenderò questo oggetto 46 00:03:25,880 --> 00:03:28,400 di stile che ho applicato 47 00:03:28,400 --> 00:03:37,130 come stile incorporato a questa vista prima e l'ho applicato come valore per questo contenitore di input. 48 00:03:37,130 --> 00:03:42,260 Ora qui in quella vista, facciamo riferimento agli stili. inputContainer, ora con un po 'di 49 00:03:42,260 --> 00:03:48,110 formattazione automatica che puoi comunque fare in Visual Studio Code andando su preferenze, scorciatoie da tastiera 50 00:03:49,130 --> 00:03:54,860 e quindi cercando il documento di formato, questa è la scorciatoia che vuoi premere in 51 00:03:55,010 --> 00:04:00,780 modo da formattare automaticamente i documenti, il file. Con ciò, abbiamo una struttura di codice pulita qui, vediamo 52 00:04:00,860 --> 00:04:04,710 che questi sono i nostri stili di contenitore di input e li applichiamo qui. 53 00:04:04,730 --> 00:04:10,910 Un altro vantaggio di avere questo oggetto foglio di stile è anche CHE puoi applicare lo stesso stile 54 00:04:10,910 --> 00:04:12,680 a più viste senza copiarlo. 55 00:04:12,710 --> 00:04:18,200 Quindi, se vogliamo avere lo stile del contenitore di input, non solo su questa vista ma anche 56 00:04:18,350 --> 00:04:25,160 su questo laggiù, potremmo semplicemente scrivere stili di stile. inputContainer, puoi applicare questo stile a tutti i componenti 57 00:04:25,190 --> 00:04:26,290 che desideri. 58 00:04:26,290 --> 00:04:32,460 Ora, ovviamente, non ne ho bisogno qui, ma potremmo usarlo qui se ne avessimo bisogno. Ora l'ultimo stile che voglio applicare è 59 00:04:32,460 --> 00:04:35,030 sull'input di testo qui. 60 00:04:35,030 --> 00:04:40,970 Lì, chiamerò solo questo input, troppe parentesi graffe, impostando i miei stili qui 61 00:04:41,130 --> 00:04:55,430 e poi sull'input di testo, fare riferimento agli stili. input, così. 62 00:04:55,560 --> 00:05:01,320 E con ciò se salviamo questo, abbiamo lo stesso aspetto di prima, ma ora stiamo usando l'oggetto foglio di stile che rende 63 00:05:01,320 --> 00:05:05,610 più semplice la condivisione e il riutilizzo degli stili e che forse ci offre anche 64 00:05:05,610 --> 00:05:10,290 alcune ottimizzazioni delle prestazioni future e, inoltre, il nostro codice jsx qui semplicemente ora è molto più snella.