1 00:00:02,260 --> 00:00:08,000 Ora abbiamo l'aspetto della carta, ora come prossima cosa sistemiamo i pulsanti ed è qualcosa che ti ho già mostrato, quindi 2 00:00:08,000 --> 00:00:11,860 sicuramente la tua possibilità di mettere in pausa il video e farlo da solo. 3 00:00:11,870 --> 00:00:16,430 Voglio assicurarmi che i pulsanti abbiano le stesse dimensioni, non dovrebbero assumere l'intera larghezza disponibile ma 4 00:00:16,760 --> 00:00:22,070 dovrebbero avere le stesse dimensioni, il che si assicura che il testo si adatti al loro interno e che siano 5 00:00:22,280 --> 00:00:22,990 ugualmente dimensionati. 6 00:00:23,000 --> 00:00:30,020 Quindi la tua possibilità di mettere in pausa il video, successivamente lo faremo insieme. Hai avuto successo? 7 00:00:30,020 --> 00:00:35,480 Assicuriamoci che i pulsanti abbiano le stesse dimensioni e per questo nella schermata di avvio del gioco in cui ho i 8 00:00:35,480 --> 00:00:43,070 pulsanti, hai imparato che la soluzione è avvolgere i pulsanti in una vista. Quindi devi aggiungere il tuo componente di visualizzazione attorno 9 00:00:43,220 --> 00:00:45,200 ai pulsanti e ora 10 00:00:45,200 --> 00:00:52,670 puoi assegnare uno stile a questi pulsanti, quindi a entrambi i pulsanti qui e userò un oggetto pulsante 11 00:00:52,670 --> 00:00:55,190 nel mio oggetto stili laggiù, quindi 12 00:00:55,370 --> 00:01:02,730 aggiungiamo un pulsante qui e date semplicemente una larghezza e qui, una larghezza che sceglierò è diciamo 80. 13 00:01:02,750 --> 00:01:09,050 Vediamo come appare, se lo salvo, un po 'troppo piccolo come sembra poiché c'è un'interruzione di riga in 14 00:01:09,260 --> 00:01:10,370 questo pulsante. 15 00:01:10,370 --> 00:01:16,890 Quindi andiamo con 120, ora è sicuramente troppo, quindi che ne 16 00:01:16,920 --> 00:01:22,510 dici di 100 e mi sembra abbastanza pulito. 17 00:01:22,530 --> 00:01:26,790 Inoltre, non è stato un compito per un utente, non preoccuparti se 18 00:01:26,910 --> 00:01:31,840 non lo hai fatto, voglio cambiare i loro colori e uno dei colori dovrebbe essere il 19 00:01:31,950 --> 00:01:37,590 nostro colore principale e voglio anche creare un accento, alcuni colori secondari per così dire che possiamo usare. 20 00:01:40,450 --> 00:01:46,810 Quindi per quello nella parte iniziale della schermata di gioco, sul pulsante stesso, c'è un puntello colorato che puoi 21 00:01:46,810 --> 00:01:48,530 impostare per controllare il colore 22 00:01:48,550 --> 00:01:54,460 e per Android, questo è il colore di sfondo, per iOS che sarà il colore del testo e 23 00:01:54,780 --> 00:02:00,250 ora il reset pulsante, lì voglio impostare un colore di # 717fc, è un bel colore 24 00:02:00,340 --> 00:02:02,170 che penso e per il pulsante 25 00:02:02,170 --> 00:02:08,170 principale, il pulsante di conferma, userò il mio tema principale e voglio usare lo stesso colore che uso 26 00:02:08,170 --> 00:02:09,370 nell'intestazione . 27 00:02:09,370 --> 00:02:12,960 Quindi lì ho questo codice esadecimale usato come colore di sfondo, userò 28 00:02:13,030 --> 00:02:19,090 lo stesso colore qui per questo secondo pulsante ora. Con ciò possiamo salvarlo e ora abbiamo 29 00:02:19,210 --> 00:02:24,050 questi due colori di pulsanti qui che a mio avviso sembrano abbastanza belli. 30 00:02:24,070 --> 00:02:30,660 Ora un aspetto negativo di questo approccio o una cosa che possiamo migliorare è che sto usando questo codice esadecimale qui, 31 00:02:30,670 --> 00:02:34,080 lo sto usando nell'intestazione e è probabile che in seguito nell'app 32 00:02:34,090 --> 00:02:37,330 vogliamo usare lo stesso colore anche in altri posti . 33 00:02:37,330 --> 00:02:41,380 Quindi sarebbe bello se potessimo configurarlo come un tipo di tema 34 00:02:41,380 --> 00:02:48,340 che potresti dire, che potremmo facilmente usare questi colori senza copiare codici esadecimali attraverso la nostra app e che possiamo anche 35 00:02:48,340 --> 00:02:53,350 cambiare il colore in un posto se mai lo desiderassimo usa un colore diverso e 36 00:02:53,350 --> 00:02:55,980 non dobbiamo farlo in dozzine di componenti. 37 00:02:56,080 --> 00:03:01,830 E per questo userò un approccio in cui aggiungerò una nuova cartella a livello di root e la 38 00:03:01,840 --> 00:03:05,440 chiamerò costanti e come sempre, puoi nominare queste cartelle come vuoi 39 00:03:05,440 --> 00:03:11,640 e lì voglio avere un colore. file js. Ancora una volta questo nome 40 00:03:11,670 --> 00:03:19,020 può anche essere chiamato come vuoi perché ciò che farà questo file è che esporterà un oggetto Javascript predefinito, esporterà 41 00:03:19,050 --> 00:03:26,760 un oggetto Javascript e lì dentro, puoi avere tutte le coppie chiave-valore che vuoi e imposterò un colore primario, quindi solo 42 00:03:26,820 --> 00:03:32,790 primario come nome chiave e questo dovrebbe essere questo codice esadecimale che ho appena copiato, quindi 43 00:03:32,790 --> 00:03:37,230 questo colore dell'intestazione anche accento o secondario, qualunque cosa tu voglia 44 00:03:37,230 --> 00:03:42,330 nominarlo, andrò con il colore accento e che dovrebbe sia questo altro colore che 45 00:03:42,330 --> 00:03:47,070 ho usato sul primo pulsante, quindi questo codice esadecimale qui lo userò qui. 46 00:03:47,070 --> 00:03:52,920 Ora questi colori sono definiti qui e ora possiamo semplicemente importarli da questo file e ogni volta che 47 00:03:52,920 --> 00:03:58,700 li cambiamo qui, cambiano ovunque in questa applicazione e possiamo quindi scambiarli facilmente durante lo sviluppo. 48 00:03:58,740 --> 00:04:07,800 Quindi ora nella schermata di avvio del gioco, possiamo solo andare avanti e importare i colori da costanti / colori come questo e ho 49 00:04:08,050 --> 00:04:15,720 dato a questo una C maiuscola qui per indicare che si tratta di una raccolta di valori, puoi nominarla come 50 00:04:15,730 --> 00:04:16,900 preferisci, puoi 51 00:04:16,900 --> 00:04:20,530 anche usare una lettera minuscola, la denominazione non ha importanza 52 00:04:20,590 --> 00:04:23,980 e ora puoi usare i colori qui per assegnarli. 53 00:04:24,010 --> 00:04:31,570 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 54 00:04:32,050 --> 00:04:39,080 il pulsante di conferma, andrò con Colori. primario e lo 55 00:04:39,080 --> 00:04:44,630 stesso nell'intestazione. Ovviamente, ora vogliamo anche usare quel colore e 56 00:04:45,020 --> 00:04:52,180 non codificarlo qui, invece importa i colori da costanti / colori e con quello importato, puoi anche usarlo in 57 00:04:52,370 --> 00:04:57,680 un foglio di stile, non solo in jsx, puoi usarlo ovunque in quel file 58 00:04:57,680 --> 00:04:59,420 dopo tutto, quindi ora 59 00:04:59,420 --> 00:05:05,680 qui, mi riferirò a Colori. primario. E se lo salvi, ancora una 60 00:05:05,720 --> 00:05:13,460 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 61 00:05:13,460 --> 00:05:19,790 essere di questo colore ma dovrebbe essere blu, devi semplicemente scambiarlo qui, la tua app è ricostruito e hai un pulsante blu. 62 00:05:19,910 --> 00:05:26,630 Quindi questo è l'enorme vantaggio di gestire i tuoi colori o altre costanti fondamentali in tali file, potresti avere un 63 00:05:26,630 --> 00:05:34,910 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 64 00:05:34,940 --> 00:05:41,000 per i margini o il padding in modo da non devi usare manualmente gli stessi valori più e 65 00:05:41,000 --> 00:05:42,550 più volte, questi sono 66 00:05:42,620 --> 00:05:47,690 tutti approcci che puoi usare per semplificarti la vita come sviluppatore e avere un 67 00:05:47,690 --> 00:05:50,900 codice in cui puoi scambiare rapidamente valori se necessario. 68 00:05:50,990 --> 00:05:56,360 Per ora, gestirò solo i miei colori lì perché è una delle cose che è più 69 00:05:56,360 --> 00:06:01,490 fastidioso da copiare ed è un ottimo approccio quindi gestirlo in un file del genere.