Ora con quel contenitore di input definito e con un paio di nuovi stili coperti,
possiamo fare qualcosa che ho detto che sarebbe sempre una buona
idea, possiamo dividere la nostra applicazione in più componenti.
Questo aspetto qui, questo
aspetto del contenitore di input, questo aspetto della carta è probabilmente qualcosa che vogliamo usare anche in altre parti
dell'applicazione.
Potremmo avere diversi articoli che vogliamo presentare in tale
carta, considera che stai costruendo un negozio online in cui hai
ogni prodotto in tale carta nella schermata panoramica. Ora, per evitare di ripetere ripetutamente questa definizione di
stile, possiamo esternalizzarla in un componente separato, un componente che non ha molta logica in esso ma
che controlla lo stile
del suo contenuto, quindi un puro componente di presentazione. Tecnicamente è ancora un normale componente React e quindi creerò un nuovo
file qui nella cartella dei componenti e lo nominerò card. Il nome dipende da te, ma è questo tipico
aspetto di una
carta, quindi mi sembra un nome adatto.
Ora qui come sempre, importa React da React e quindi importa anche la vista da React Native qui e quindi crea il componente
della carta, un componente funzionale come questo che alla fine esporti come predefinito e ovviamente poiché si tratta solo di presentazione qui, noi Avrai
bisogno del foglio
di stile per creare un oggetto di stile perché quello sarà l'elemento centrale di
questo componente, dovrebbe essere lì per
avvolgere se stesso attorno a qualsiasi contenuto e applicare solo uno stile generale.
Quindi ora vado alla schermata di avvio del gioco e prenderò tutti gli stili qui dal contenitore di input,
li copierò da lì e li aggiungerò invece alla scheda. Qui aggiungerò una nuova proprietà della carta e
userò
i miei stili qui e all'interno del componente della carta,
avrò un markup molto semplice per così dire, un codice jsx molto semplice.
È solo una vista che ritorno qui che dovrebbe essere racchiusa tra oggetti di scena per bambini, oggetti di
scena per bambini è quel supporto speciale in React che è fondamentalmente il contenuto che passi tra i
tag di apertura e chiusura del tuo componente personalizzato. Quindi può avvolgere se stesso attorno a qualsiasi contenuto perché
l'unico obiettivo di questo componente della carta è applicare uno stile al contenitore circostante e lo facciamo aggiungendo qui la carta degli stili.
Ora c'è solo una cosa, ci sono alcuni stili qui che probabilmente non dovrebbero essere impostati dall'interno della
carta, non
tutte le carte potrebbero avere questa larghezza o larghezza massima e non tutte le carte dovrebbero centrare il suo contenuto.
Quindi taglierò questi tre elementi da lì e avrò solo l'ombra e l'imbottitura installati
qui e voglio renderlo un po 'più flessibile.
Oltre agli stili di carte, sarebbe bello se potessimo anche assegnare i nostri stili dall'esterno
e magari anche scavalcare alcuni degli stili di carte. Possiamo farlo passando un nuovo oggetto al puntello di stile e distribuendo
tutte le proprietà, tutte le coppie chiave-valore del nostro stile di carte qui in questo nuovo oggetto.
Questo è l'operatore spread, una moderna funzione Javascript che estrae tutte le coppie chiave-valore di un oggetto da
quell'oggetto e lo aggiunge a un nuovo oggetto circostante.
Quindi copiamo tutti gli stili definiti laggiù in questo nuovo oggetto
e lo sto facendo in modo da poter aggiungere qui un'altra coppia chiave-valore o un'altra serie di coppie
chiave-valore in cui prendo tutti gli stili definiti negli stili di oggetti di scena, quindi nel prop stile ho passato al
mio
componente personalizzato, prendo tutte le coppie chiave-valore definite lì e le unisco in questo oggetto e, dato
che faccio questo secondo, questo sostituirà qualsiasi coppia chiave-valore impostata nella scheda stili, in modo che
possiamo sovrascrivere qualsiasi stile impostato dall'esterno quando utilizziamo il
nostro componente e quando aggiungiamo altri stili all'esterno del componente, lo uniremo e lo considereremo
e con ciò possiamo anche assegnare i nostri stili dall'esterno del componente scheda quando utilizziamo il componente scheda
e l'utilizzo del componente scheda è qualcosa che avrebbe senso come passaggio successivo.
Quindi andiamo a queste schermate di avvio e importiamo le carte dalla cartella dei componenti e lì dalla cartella delle
carte e sostituiamo la vista del nostro contenitore di input qui con la carta, come questa, proprio come questa, con i tag
di apertura e chiusura.
Ora di nuovo, voglio impostare i miei stili, voglio impostare la mia larghezza, larghezza massima e allineare
gli elementi, quindi terrò il contenitore di input nel foglio
di stile laggiù ma ora mi libererò di tutti gli altri stili lì dentro, tutti gli stili che sono ora impostati
nella
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
che ha un effetto perché nel componente della scheda, è quel puntello di stile che Mi unisco agli altri miei
stili, quindi per quel puntello di stile, indicherò il contenitore di input degli stili. Ora, se lo salviamo, ricevo un errore, l'oggetto
non è una
funzione vicino al foglio di stile nativo di React.
Quindi nella carta. file js come indica qui, qualcosa non va, mi dà anche il numero
di riga, è la riga 10, questo è ciò che questo numero qui significa e sì, il mio problema qui è che uso un foglio di
stile come
questo, è sbagliato, invece dobbiamo chiamare Stylesheet . creare per definire i nostri stili, quindi questa
è la sintassi giusta.
Quindi è un errore di sintassi, non tecnicamente un errore di sintassi ma sto usando l'oggetto del foglio di stile in modo errato.
Quindi è un errore da parte mia, il messaggio di errore ci ha aiutato in
questo e ora abbiamo lo stesso aspetto di prima ma abbiamo quella carta riutilizzabile che ora possiamo usare in qualsiasi posto dove
vogliamo avere esattamente questo aspetto con le ombre e presto.