Quindi diamo uno stile a questi componenti lì e per questo, vogliamo applicare un certo stile ai componenti del testo.
Il componente di testo supporta effettivamente la proprietà di stile, come è
possibile verificare nei documenti ufficiali, ma il componente di testo in realtà supporta meno funzionalità di stile rispetto alla vista e quindi,
lo avvolgerò
in un altro componente di vista e questo è solo il componente di vista che stanno
importando da React Native, questa è anche la parte che volevo dire con te ha solo un paio
di componenti di base, ma ti porteranno molto lontano perché lavori sempre con visualizzazioni, pulsanti e testi.
Quindi qui avvolgerò questo testo con il componente di visualizzazione di apertura e chiusura qui e ora qui, abbiamo più
opzioni di stile.
Ora di nuovo, non andrò qui per gli stili incorporati, ma
aggiungere stili al foglio di stile, ad
esempio potremmo nominare questo elemento dell'elenco ma il nome dipende da te e diciamo che qui vogliamo avere un riempimento di 10, forse
diamo è un colore di sfondo di questo codice esadecimale grigio qui, dagli un colore del bordo nero e anche una larghezza del bordo di uno e ora assegniamo la voce di elenco
come stile a questa vista facendo riferimento agli stili. listItem qui e con questo se salviamo
questo, ora la nostra voce di elenco dovrebbe apparire un po 'meglio, impara React Native,
ecco come appare. Ora probabilmente anche una certa spaziatura sarebbe piacevole,
possiamo ottenere che con margine, il riempimento è spaziatura tra il bordo e il contenuto, il margine è spaziatura tra il bordo e il
contenuto circostante, quindi gli altri elementi
attorno ad esso e lì, potremmo aggiungere margine 10 per aggiungere un margine in tutte le direzioni, potremmo anche
solo aggiungere un margine in alto o solo in fondo o ed è
qualcosa che non esiste nei CSS, puoi aggiungere un margine verticale di 10 per avere un margine in alto e
in basso ma non a sinistra e a
destra e questo è un esempio di come questo si basa su CSS ma non è lo stesso perché il margine verticale non
sarebbe una proprietà che hai in CSS, ce l'hai in React Native. Quindi, se ora lo salviamo
e aggiungiamo imparare React Native qui, ora vedi che c'è
una spaziatura tra quegli elementi e ovviamente anche su iOS se lo facciamo lì.
Quindi questo ora aggiunge i nostri articoli e anche se probabilmente non vinceremo ancora un premio di bellezza, è almeno un buon inizio e ci immergeremo
più a fondo nello styling e tutto ciò che puoi fare lì più avanti in questo
corso, dobbiamo solo ottenere lì passo dopo passo ovviamente.
Ora una cosa che dobbiamo regolare ora a proposito, la chiave qui deve sempre essere sull'elemento radice nella tua lista, quindi l'elemento
che stai
ripetendo e non stiamo più solo ripetendo il testo, invece siamo ora ripetendo l'intera
vista, quindi la chiave
dovrebbe essere aggiunta alla vista qui, non al testo nella vista. Ecco perché ho ricevuto questo avviso, di nuovo questo errore,
ora con la
chiave spostata nella vista anziché nel testo, questo dovrebbe essere sparito.