Gli stili in linea sono molto facili da applicare, ma il loro svantaggio è che più complessa diventa la
tua app e la tua configurazione diventa, il tuo componente diventa, più difficile è seguire insieme a tutti questi stili in linea.
Avrai un sacco di codice lassù, nel tuo codice jsx e può essere difficile leggerlo,
capirlo.
Pertanto, sebbene sia possibile utilizzare gli stili incorporati, in
realtà si consiglia di utilizzare un oggetto foglio di stile ed è esattamente ciò che
viene creato laggiù.
Questo usa un foglio di stile che è una classe alla fine fornita da React
Native, motivo per cui lo importiamo da lì e questo alla fine crea un oggetto Javascript che contiene tutta la configurazione dello stile.
La differenza con un oggetto Javascript vaniglia che potresti anche creare da solo
in questo modo è semplicemente quel foglio di stile. create potrebbe in futuro applicare anche alcune ottimizzazioni delle prestazioni e applicare i tuoi
stili in modo più efficiente alla fine.
Pertanto, dovresti usarlo perché non perdi nulla, ma in futuro potresti
beneficiare di ulteriori ottimizzazioni. In questo momento, quando sto registrando questo, non c'è
alcuna differenza, ma di nuovo dovresti usare il foglio di stile. crea perché non danneggerà e potresti ottenere ulteriori
ottimizzazioni delle prestazioni in futuro. Un altro vantaggio dell'utilizzo del foglio di
stile è che ciò aggiungerà automaticamente un po 'di convalida, il che significa che se si utilizza una proprietà
di stile errata o un valore errato, React Native lo rileverà e genererà un errore che semplifica
semplicemente l'individuazione errori del genere,
se non ci fosse la validazione, fallirebbe in silenzio, semplicemente non applicherebbe
lo stile e potresti non vederlo immediatamente o vedrai che lo stile non è corretto ma non capisci
perché non funziona, quindi questa convalida integrata è un
altro vantaggio dell'utilizzo di quell'oggetto foglio di stile qui. Per creare, passi un oggetto Javascript come argomento,
quindi l'argomento che passi qui è un
oggetto Javascript e in quell'oggetto, ora puoi definire i tuoi stili e non
lo fai aggiungendo il padding 10 perché non sarebbe chiaro dove questo dovrebbe essere applicato, invece
di usare
qualsiasi nome di proprietà di tua scelta, come ad esempio schermo, per impostare lo stile per la nostra visione generale dello
schermo, quindi per questo
livello superiore di te qui e avresti potuto scegliere qualsiasi nome tu
voglia qui, questo non deve essere schermo. Qui, ora hai un oggetto Javascript
nidificato, quindi il valore per questa proprietà è un altro
oggetto Javascript e lì, ad esempio, imposti il
padding 50, quindi anche lo stile che abbiamo avuto lassù.
Ora possiamo rimuovere quello stile qui, ho ancora
la proprietà style ma non ho più l'oggetto style inline e invece qui, ora punto gli
stili che è questa costante che contiene il nostro oggetto foglio di stile, io punto gli stili e
poi con punto, indico lo stile dello schermo ed è quello che volevo dire, puoi scegliere qualsiasi nome tu
voglia qui, se avessi
chiamato questa radice, allora dovresti semplicemente usare la radice lassù. Quindi puoi usare qualsiasi nome tu voglia, devi solo
assicurarti
che i nomi che usi laggiù incontrino i nomi che usi qui e ora
dice a React Native che questa vista dovrebbe avere gli stili definiti per lo schermo laggiù.
Puoi fare lo stesso per il nostro contenitore di input diciamo,
ancora una volta questo nome dipende totalmente da te, contenitore di input. Qui prenderò questo oggetto
di stile che ho applicato
come stile incorporato a questa vista prima e l'ho applicato come valore per questo contenitore di input.
Ora qui in quella vista, facciamo riferimento agli stili. inputContainer, ora con un po 'di
formattazione automatica che puoi comunque fare in Visual Studio Code andando su preferenze, scorciatoie da tastiera
e quindi cercando il documento di formato, questa è la scorciatoia che vuoi premere in
modo da formattare automaticamente i documenti, il file. Con ciò, abbiamo una struttura di codice pulita qui, vediamo
che questi sono i nostri stili di contenitore di input e li applichiamo qui.
Un altro vantaggio di avere questo oggetto foglio di stile è anche CHE puoi applicare lo stesso stile
a più viste senza copiarlo.
Quindi, se vogliamo avere lo stile del contenitore di input, non solo su questa vista ma anche
su questo laggiù, potremmo semplicemente scrivere stili di stile. inputContainer, puoi applicare questo stile a tutti i componenti
che desideri.
Ora, ovviamente, non ne ho bisogno qui, ma potremmo usarlo qui se ne avessimo bisogno. Ora l'ultimo stile che voglio applicare è
sull'input di testo qui.
Lì, chiamerò solo questo input, troppe parentesi graffe, impostando i miei stili qui
e poi sull'input di testo, fare riferimento agli stili. input, così.
E con ciò se salviamo questo, abbiamo lo stesso aspetto di prima, ma ora stiamo usando l'oggetto foglio di stile che rende
più semplice la condivisione e il riutilizzo degli stili e che forse ci offre anche
alcune ottimizzazioni delle prestazioni future e, inoltre, il nostro codice jsx qui semplicemente ora è molto più snella.