Ora abbiamo l'aspetto della carta, ora come prossima cosa sistemiamo i pulsanti ed è qualcosa che ti ho già mostrato, quindi
sicuramente la tua possibilità di mettere in pausa il video e farlo da solo.
Voglio assicurarmi che i pulsanti abbiano le stesse dimensioni, non dovrebbero assumere l'intera larghezza disponibile ma
dovrebbero avere le stesse dimensioni, il che si assicura che il testo si adatti al loro interno e che siano
ugualmente dimensionati.
Quindi la tua possibilità di mettere in pausa il video, successivamente lo faremo insieme. Hai avuto successo?
Assicuriamoci che i pulsanti abbiano le stesse dimensioni e per questo nella schermata di avvio del gioco in cui ho i
pulsanti, hai imparato che la soluzione è avvolgere i pulsanti in una vista. Quindi devi aggiungere il tuo componente di visualizzazione attorno
ai pulsanti e ora
puoi assegnare uno stile a questi pulsanti, quindi a entrambi i pulsanti qui e userò un oggetto pulsante
nel mio oggetto stili laggiù, quindi
aggiungiamo un pulsante qui e date semplicemente una larghezza e qui, una larghezza che sceglierò è diciamo 80.
Vediamo come appare, se lo salvo, un po 'troppo piccolo come sembra poiché c'è un'interruzione di riga in
questo pulsante.
Quindi andiamo con 120, ora è sicuramente troppo, quindi che ne
dici di 100 e mi sembra abbastanza pulito.
Inoltre, non è stato un compito per un utente, non preoccuparti se
non lo hai fatto, voglio cambiare i loro colori e uno dei colori dovrebbe essere il
nostro colore principale e voglio anche creare un accento, alcuni colori secondari per così dire che possiamo usare.
Quindi per quello nella parte iniziale della schermata di gioco, sul pulsante stesso, c'è un puntello colorato che puoi
impostare per controllare il colore
e per Android, questo è il colore di sfondo, per iOS che sarà il colore del testo e
ora il reset pulsante, lì voglio impostare un colore di # 717fc, è un bel colore
che penso e per il pulsante
principale, il pulsante di conferma, userò il mio tema principale e voglio usare lo stesso colore che uso
nell'intestazione .
Quindi lì ho questo codice esadecimale usato come colore di sfondo, userò
lo stesso colore qui per questo secondo pulsante ora. Con ciò possiamo salvarlo e ora abbiamo
questi due colori di pulsanti qui che a mio avviso sembrano abbastanza belli.
Ora un aspetto negativo di questo approccio o una cosa che possiamo migliorare è che sto usando questo codice esadecimale qui,
lo sto usando nell'intestazione e è probabile che in seguito nell'app
vogliamo usare lo stesso colore anche in altri posti .
Quindi sarebbe bello se potessimo configurarlo come un tipo di tema
che potresti dire, che potremmo facilmente usare questi colori senza copiare codici esadecimali attraverso la nostra app e che possiamo anche
cambiare il colore in un posto se mai lo desiderassimo usa un colore diverso e
non dobbiamo farlo in dozzine di componenti.
E per questo userò un approccio in cui aggiungerò una nuova cartella a livello di root e la
chiamerò costanti e come sempre, puoi nominare queste cartelle come vuoi
e lì voglio avere un colore. file js. Ancora una volta questo nome
può anche essere chiamato come vuoi perché ciò che farà questo file è che esporterà un oggetto Javascript predefinito, esporterà
un oggetto Javascript e lì dentro, puoi avere tutte le coppie chiave-valore che vuoi e imposterò un colore primario, quindi solo
primario come nome chiave e questo dovrebbe essere questo codice esadecimale che ho appena copiato, quindi
questo colore dell'intestazione anche accento o secondario, qualunque cosa tu voglia
nominarlo, andrò con il colore accento e che dovrebbe sia questo altro colore che
ho usato sul primo pulsante, quindi questo codice esadecimale qui lo userò qui.
Ora questi colori sono definiti qui e ora possiamo semplicemente importarli da questo file e ogni volta che
li cambiamo qui, cambiano ovunque in questa applicazione e possiamo quindi scambiarli facilmente durante lo sviluppo.
Quindi ora nella schermata di avvio del gioco, possiamo solo andare avanti e importare i colori da costanti / colori come questo e ho
dato a questo una C maiuscola qui per indicare che si tratta di una raccolta di valori, puoi nominarla come
preferisci, puoi
anche usare una lettera minuscola, la denominazione non ha importanza
e ora puoi usare i colori qui per assegnarli.
Quindi, per questo pulsante di ripristino, ora utilizzeremo un valore dinamico in modo da poter raggiungere i colori. accento e qui per il pulsante principale, per
il pulsante di conferma, andrò con Colori. primario e lo
stesso nell'intestazione. Ovviamente, ora vogliamo anche usare quel colore e
non codificarlo qui, invece importa i colori da costanti / colori e con quello importato, puoi anche usarlo in
un foglio di stile, non solo in jsx, puoi usarlo ovunque in quel file
dopo tutto, quindi ora
qui, mi riferirò a Colori. primario. E se lo salvi, ancora una
volta abbiamo lo stesso aspetto di prima ma ancora una volta in un altro modo più elegante in cui se decidi che il tuo accento non dovrebbe
essere di questo colore ma dovrebbe essere blu, devi semplicemente scambiarlo qui, la tua app è ricostruito e hai un pulsante blu.
Quindi questo è l'enorme vantaggio di gestire i tuoi colori o altre costanti fondamentali in tali file, potresti avere un
altro file chiamato text, ad esempio dove hai alcune dimensioni del font core o un'altra spaziatura dei file in cui memorizzi i valori predefiniti
per i margini o il padding in modo da non devi usare manualmente gli stessi valori più e
più volte, questi sono
tutti approcci che puoi usare per semplificarti la vita come sviluppatore e avere un
codice in cui puoi scambiare rapidamente valori se necessario.
Per ora, gestirò solo i miei colori lì perché è una delle cose che è più
fastidioso da copiare ed è un ottimo approccio quindi gestirlo in un file del genere.