1 00:00:02,470 --> 00:00:05,140 Ora che abbiamo lavorato sul testo 2 00:00:05,140 --> 00:00:11,250 qui, per uno ora possiamo tornare all'app. js e sbarazzarsi di questo cambiamento temporaneo qui in 3 00:00:11,250 --> 00:00:12,100 cui mostriamo 4 00:00:12,100 --> 00:00:17,350 sempre il gioco sullo schermo, non vogliamo più farlo, invece vogliamo ricominciare con la normale schermata 5 00:00:17,350 --> 00:00:24,790 di avvio del gioco e oltre a questo cambiamento, ora anche io vuoi fare un ulteriore aggiustamento e questo è questo pulsante di 6 00:00:24,790 --> 00:00:25,720 avvio del gioco. 7 00:00:25,810 --> 00:00:31,000 Stiamo usando il pulsante normale qui che ovviamente è qualcosa che puoi fare ma a volte vuoi anche 8 00:00:31,000 --> 00:00:35,910 creare il tuo pulsante, vuoi avere il pieno controllo su come appare il tuo pulsante e per 9 00:00:36,130 --> 00:00:40,610 questo, puoi ovviamente crearne uno tuo pulsante ed è esattamente quello che faremo ora. 10 00:00:40,950 --> 00:00:45,700 Quindi nella cartella componenti, aggiungerò il mio pulsante e puoi nominarlo come preferisci, 11 00:00:45,700 --> 00:00:46,390 potresti 12 00:00:46,390 --> 00:00:49,400 nominarlo pulsante ma questo è già il nome 13 00:00:49,480 --> 00:00:56,740 di quello incorporato e mentre puoi ovviamente nominare il tuo come questo, per evitare qualsiasi scontro o confusione di 14 00:00:56,740 --> 00:01:04,330 nomi, nominerò il mio pulsante qui pulsante principale perché sarà il mio pulsante principale, che uso per le grandi azioni in 15 00:01:04,330 --> 00:01:05,710 questo gioco come 16 00:01:05,710 --> 00:01:07,480 l'avvio di un nuovo gioco. 17 00:01:07,720 --> 00:01:12,730 Ora che è il nome del file lì dentro, avremo ovviamente un normale componente 18 00:01:12,730 --> 00:01:14,470 React, quindi importiamo React. 19 00:01:14,590 --> 00:01:18,160 Importiamo una vista qui, avremo sicuramente bisogno di un 20 00:01:18,160 --> 00:01:23,960 po 'di testo, avremo sicuramente bisogno di un foglio di stile di React Native come questo 21 00:01:24,160 --> 00:01:29,990 e poi qui, abbiamo il componente pulsante principale che riceve oggetti di scena e che alla 22 00:01:29,990 --> 00:01:35,290 fine restituirà alcuni jsx. Avremo i nostri oggetti oggetto con il foglio di stile. creare e 23 00:01:35,470 --> 00:01:39,310 come sempre, esporteremo il nostro pulsante principale. 24 00:01:39,310 --> 00:01:42,100 E ora la domanda è: come si costruisce il proprio pulsante? 25 00:01:42,110 --> 00:01:48,640 Ora potrebbe sembrare molto complesso farlo, ma in realtà non lo è. Il tuo pulsante è anche solo una 26 00:01:48,640 --> 00:01:56,890 combinazione di visualizzazione e testo e molto importante, anche un componente tangibile, come evidenziazione tangibile o opacità tangibile o 27 00:01:56,890 --> 00:02:01,300 feedback nativo toccabile o persino toccabile senza feedback se non 28 00:02:01,360 --> 00:02:06,940 vuoi dare alcun feedback visivo. Quindi qui andrò con un'opacità tangibile e abbiamo bisogno 29 00:02:06,940 --> 00:02:13,690 che per dare un feedback all'utente sul fatto che il pulsante è stato premuto e per registrare un evento onPress e oltre 30 00:02:14,320 --> 00:02:19,720 a questo, costruiremo semplicemente il nostro pulsante con una vista che abbiamo disegnato in un certo modo e 31 00:02:19,720 --> 00:02:21,370 un testo lì dentro. 32 00:02:21,370 --> 00:02:29,330 Quindi ora qui nel pulsante principale, possiamo restituire la nostra opacità tangibile e lì dentro, abbiamo una vista che possiamo usare per poi dare uno stile al 33 00:02:29,330 --> 00:02:34,120 pulsante e lì dentro, forse un testo per un testo che dovrebbe avere un pulsante. 34 00:02:34,240 --> 00:02:39,680 Ora diciamo che il nostro pulsante dovrebbe essere utilizzabile in modo tale che abbiamo passato 35 00:02:39,680 --> 00:02:41,600 un testo direttamente tra 36 00:02:41,600 --> 00:02:46,030 i tag di apertura e chiusura del nostro componente, quindi qui possiamo 37 00:02:46,300 --> 00:02:55,990 usare oggetti secondari come testo che voglio mostrare sul pulsante e quindi qui in questa vista, io avremo uno stile di dire il pulsante degli stili, su 38 00:02:55,990 --> 00:03:04,860 questo testo interno qui, potremmo avere uno stile del testo del pulsante degli stili e questi nomi dipendono ovviamente da te e sull'opacità tangibile, aggiungerò 39 00:03:04,930 --> 00:03:07,920 l'ascoltatore onPress e noi dovrò fare qualcosa lì. 40 00:03:09,000 --> 00:03:11,430 Quindi ora otteniamo lo scheletro per il nostro pulsante, ora 41 00:03:11,450 --> 00:03:13,700 possiamo iniziare ad aggiungere alcuni stili ad esso. 42 00:03:13,790 --> 00:03:18,450 Ora ovviamente puoi modellare quel pulsante nel modo che preferisci, qui ho in mente 43 00:03:18,470 --> 00:03:20,410 un certo stile che aggiungerò, 44 00:03:20,420 --> 00:03:24,490 ma di nuovo, sicuramente ci gioco e applico i tuoi stili. 45 00:03:24,530 --> 00:03:30,620 Quindi per il pulsante stesso che è la vista intorno al testo, voglio dare al pulsante un certo 46 00:03:30,620 --> 00:03:34,850 colore di sfondo e puoi anche assicurarti che questo possa essere impostato 47 00:03:42,270 --> 00:03:48,960 dall'esterno, puoi essere davvero creativo qui. Cercherò di codificare un colore qui ovviamente usando i miei colori costanti qui. Quindi importerò i colori da 48 00:03:49,100 --> 00:03:55,710 costanti / colori, colori come questo e poi qui userò il colore primario, forse il colore primario, così. 49 00:03:55,790 --> 00:04:00,380 Quindi questo è il colore di sfondo che dovrebbe avere questo pulsante, di nuovo puoi anche assicurarti che 50 00:04:00,380 --> 00:04:04,090 questo stile sia impostato in modo dinamico con l'aiuto di qualche oggetto che stai 51 00:04:04,160 --> 00:04:06,290 ottenendo dall'esterno ma qui, lo codificherò qui. 52 00:04:06,290 --> 00:04:11,180 Inoltre, il pulsante dovrebbe avere un'imbottitura in modo che il testo non si 53 00:04:11,270 --> 00:04:13,130 trovi direttamente sui bordi 54 00:04:13,130 --> 00:04:19,310 del contenitore dei pulsanti, quindi della casella attorno al testo ma c'è una spaziatura e puoi usare 55 00:04:19,310 --> 00:04:22,590 la stessa imbottitura in tutte le direzioni ma voglio 56 00:04:22,640 --> 00:04:29,300 usare un'imbottitura verticale di 12, quindi non molta imbottitura in alto e in basso e un'imbottitura orizzontale diciamo 30, 57 00:04:29,300 --> 00:04:32,550 quindi molta più imbottitura a sinistra e a destra. 58 00:04:32,710 --> 00:04:36,830 Questo è il pulsante, ora per il testo del pulsante, c'è anche il 59 00:04:36,880 --> 00:04:41,500 colore del bianco che dovrebbe apparire bene sul nostro colore primario, potresti usare anche il 60 00:04:41,500 --> 00:04:47,290 nero perché il nostro colore primario è in realtà un colore in cui, come puoi vedere, sia bianco che il 61 00:04:47,410 --> 00:04:49,480 nero funziona davvero, quindi puoi usare 62 00:04:49,480 --> 00:04:55,840 entrambi ma andrò con il bianco qui per il pulsante e aggiungerò una famiglia di caratteri di sans aperti per usare anche 63 00:04:55,840 --> 00:05:01,780 questo carattere personalizzato lì, come hai imparato, devi impostarlo su ogni testo, non c'è ereditarietà, non c'è alcun carattere globale 64 00:05:01,780 --> 00:05:07,150 che puoi impostare, ogni testo che dovrebbe usare questo carattere ha bisogno di ottenerlo e aggiungerò una dimensione 65 00:05:07,150 --> 00:05:15,840 del carattere diciamo 18 per avere un testo più grande qui in questo pulsante . Ora, quando si preme il pulsante, in realtà ovviamente in 66 00:05:15,840 --> 00:05:21,720 genere non voglio gestire questo evento di stampa all'interno del pulsante ma all'interno del 67 00:05:21,720 --> 00:05:24,990 componente in cui utilizziamo il pulsante. 68 00:05:25,110 --> 00:05:27,160 Quindi voglio semplicemente inoltrarlo e per 69 00:05:27,180 --> 00:05:33,330 questo, possiamo semplicemente aspettarci di ottenere un riferimento di funzione, una funzione di gestore di eventi sul diciamo sul 70 00:05:33,330 --> 00:05:36,490 pulsante Prop sul nostro pulsante personalizzato, ma puoi nominare 71 00:05:36,510 --> 00:05:41,670 questo prop qualunque, puoi chiamarlo suClicca perché in Alla fine, sei tu che usi il tuo 72 00:05:41,670 --> 00:05:42,510 pulsante e 73 00:05:42,600 --> 00:05:48,540 lì devi solo assicurarti di passare un riferimento alla funzione di adattamento, un puntatore di adattamento a una 74 00:05:48,540 --> 00:05:54,310 funzione del gestore di eventi su onPress o qualunque cosa tu lo chiami prop sul tuo pulsante. 75 00:05:54,360 --> 00:05:55,680 Quindi questo nome 76 00:05:55,680 --> 00:05:58,610 dipende da te, ora usiamo il pulsante principale e usiamolo 77 00:05:58,610 --> 00:06:02,170 nella schermata di avvio del gioco. Lì possiamo semplicemente importarlo, 78 00:06:02,190 --> 00:06:13,230 quindi importare il pulsante principale da componenti / MainButton e questo pulsante principale ora viene utilizzato qui per iniziare un nuovo 79 00:06:13,230 --> 00:06:14,170 gioco. 80 00:06:14,230 --> 00:06:16,980 Quindi sostituirò il pulsante qui con il pulsante principale, 81 00:06:16,980 --> 00:06:23,610 ma tieni presente che su questo pulsante ho configurato il contenuto, il testo da mostrare in modo tale che sia effettivamente 82 00:06:23,610 --> 00:06:31,440 il contenuto che viene passato tra i tag di apertura e chiusura del nostro pulsante e quindi indietro nella schermata di avvio del gioco, il 83 00:06:31,440 --> 00:06:32,790 titolo qui non 84 00:06:32,790 --> 00:06:38,760 viene più passato su un oggetto di proprietà del titolo ma invece, ora abbiamo un tag di apertura 85 00:06:38,760 --> 00:06:42,730 e chiusura per il nostro pulsante e aggiungiamo l'inizio del gioco lì. 86 00:06:44,110 --> 00:06:50,170 Ora onPress è ancora un oggetto di scena che lasciamo qui perché nel pulsante principale, inoltro l'evento onPress, per 87 00:06:50,230 --> 00:06:54,520 così dire, alla funzione che ottengo da solo sul mio oggetto di stampa 88 00:06:54,520 --> 00:07:00,870 qui, quindi dobbiamo impostare il supporto di onPress sul nostro pulsante e quindi con ciò, dovremmo avere un bel pulsante 89 00:07:00,870 --> 00:07:04,500 principale qui, un bel pulsante quando iniziamo una nuova partita. 90 00:07:07,840 --> 00:07:09,280 Proviamo qui, ecco 91 00:07:09,310 --> 00:07:13,680 come appare e secondo me sembra molto carino, un bel pulsante. 92 00:07:13,900 --> 00:07:15,080 Non ho ancora 93 00:07:15,220 --> 00:07:19,360 finito, voglio avere angoli arrotondati su quel pulsante e per quello, tornando 94 00:07:19,360 --> 00:07:24,640 al file del pulsante principale, possiamo ovviamente semplicemente andare a questa proprietà del pulsante qui 95 00:07:24,640 --> 00:07:32,650 nel foglio di stile che è l'oggetto di stile che viene applicato al nostro vista e lì, possiamo aggiungere un raggio di confine 96 00:07:32,650 --> 00:07:39,210 di 25 e se lo facciamo, allora vedrai che se ora ottengo questo pulsante, ora ha questo bell'aspetto qui. 97 00:07:39,450 --> 00:07:45,580 Lascia che lo mostri anche su Android, ora ha gli angoli arrotondati e ha questo piacevole effetto opacità quando 98 00:07:45,580 --> 00:07:46,120 lo 99 00:07:46,270 --> 00:07:51,680 tocchi e, come già accennato in precedenza, puoi cambiare questo effetto opacità andando al componente di 100 00:07:51,730 --> 00:07:58,080 opacità toccabile e lì, puoi imposta l'opacità attiva sul livello di opacità che vuoi avere quando viene premuto, ad 101 00:07:58,120 --> 00:07:59,090 esempio se usi 102 00:07:59,140 --> 00:08:04,040 un valore piuttosto elevato qui, allora questo effetto è meno forte, ora è solo 103 00:08:04,060 --> 00:08:10,930 leggermente trasparente quando lo tocchiamo e non trasparente come prima. Ma dipende da te quello che vuoi 104 00:08:10,930 --> 00:08:11,980 qui, 105 00:08:11,980 --> 00:08:15,530 lo farò io. 6 qui per avere un effetto 106 00:08:15,610 --> 00:08:21,130 leggermente più forte, ma di nuovo è qualcosa che puoi configurare e in generale, il mio suggerimento sarebbe di giocare con 107 00:08:21,130 --> 00:08:28,950 quello e vedere come puoi modellare quel pulsante, come puoi davvero adattarlo alle tue esigenze. Ora con il pulsante personalizzato aggiunto, voglio 108 00:08:28,950 --> 00:08:31,140 anche usarlo sul gioco 109 00:08:31,140 --> 00:08:33,170 sullo schermo, quindi 110 00:08:33,270 --> 00:08:42,380 lì, importerò anche il pulsante principale da componenti / MainButton come questo e quindi aggiungerò semplicemente quel 111 00:08:42,610 --> 00:08:49,110 pulsante principale qui quando mostriamo il nostro nuovo pulsante di gioco laggiù. 112 00:08:49,120 --> 00:08:53,620 Usa invece il pulsante principale, quindi rimuovi l'elica del titolo perché non è 113 00:08:53,620 --> 00:08:55,710 così che stiamo impostando il titolo 114 00:08:55,720 --> 00:09:02,840 sul nostro pulsante personalizzato, invece dobbiamo passarlo qui tra i tag di apertura e chiusura dei tag dei nostri componenti personalizzati. 115 00:09:03,040 --> 00:09:11,950 Quindi ora qui, questo dovrebbe anche apparire più bello se finiamo rapidamente un gioco qui, cercando di far indovinare il computer 116 00:09:11,950 --> 00:09:13,540 33, eccoci qui 117 00:09:17,550 --> 00:09:20,730 e ora vediamo anche il bel pulsante qui. 118 00:09:20,730 --> 00:09:24,540 Vediamo anche l'output corretto qui per quanto riguarda il numero di round 119 00:09:24,540 --> 00:09:25,440 che ha 120 00:09:25,440 --> 00:09:30,510 richiesto e il numero che abbiamo dovuto indovinare e possiamo iniziare un nuovo gioco da quel 121 00:09:36,440 --> 00:09:44,900 momento in poi e anche ripassarlo molto velocemente, sì, è tutto molto bello. 122 00:09:44,900 --> 00:09:46,520 La cosa rimanente che ora voglio ancora fare è che voglio lavorare su questi due pulsanti, inferiore e superiore. 123 00:09:46,520 --> 00:09:48,230 Sembrano un po 124 00:09:48,290 --> 00:09:54,200 'noiosi, direi, possiamo sicuramente renderli più eccitanti. Ora un modo per renderli un po 'più eccitanti è 125 00:09:54,200 --> 00:09:56,690 usare anche qui il nostro pulsante personalizzato. 126 00:09:57,020 --> 00:10:04,710 Quindi ovviamente qui nella schermata di gioco, possiamo anche importare il pulsante principale da componenti / MainButton, quindi il nostro 127 00:10:04,730 --> 00:10:09,650 pulsante personalizzato e usarlo al posto del pulsante che stiamo attualmente utilizzando, che 128 00:10:09,660 --> 00:10:12,070 è incorporato. Quindi usa 129 00:10:12,200 --> 00:10:17,770 il nostro pulsante qui, quindi ovviamente sposta il titolo tra i tag di 130 00:10:17,870 --> 00:10:24,710 apertura e chiusura, quindi qui è più basso e poi qui per il secondo pulsante, è più 131 00:10:25,220 --> 00:10:31,610 grande e ora dovrebbe apparire un po 'più bello se iniziamo un nuovo gioco qui . 132 00:10:31,640 --> 00:10:35,470 Ora usiamo i nostri pulsanti personalizzati qui, anche se ora vediamo anche 133 00:10:35,590 --> 00:10:39,440 un problema, ci sono semplicemente un po 'troppo grandi, ci sono troppo vicini 134 00:10:39,530 --> 00:10:44,540 l'uno all'altro, possiamo cambiarlo però scendendo nel contenitore dei pulsanti e dandogli un po' più larghezza, forse 135 00:10:44,540 --> 00:10:47,550 impostare la larghezza massima al 90% qui in realtà. 136 00:10:47,560 --> 00:10:53,490 Quindi ora se proviamo di nuovo, sì, sembra un po 'meglio, c'è almeno un po' di spazio tra i pulsanti e 137 00:10:53,490 --> 00:10:58,380 per ora questo lo farà perché per ora, non stiamo ottimizzando per tutte le dimensioni dello schermo. 138 00:10:58,530 --> 00:11:04,140 Aumentiamo anche questa larghezza qui a 400 in modo da avere abbastanza larghezza, in 139 00:11:04,140 --> 00:11:09,160 realtà usiamo 400 pixel e ora questo sembra buono qui su iOS e 140 00:11:12,590 --> 00:11:15,880 anche su Android. Ora sembra un po 'meglio 141 00:11:15,890 --> 00:11:22,700 come ho già detto, ma non sarebbe bello anche se avessimo icone lì, invece del testo perché il testo ovviamente funziona ma un'icona potrebbe 142 00:11:22,700 --> 00:11:24,650 anche fare il trucco e non 143 00:11:24,650 --> 00:11:30,830 abbiamo usato icone finora spesso ne hai bisogno nelle app mobili. È sicuramente qualcosa di cui dovresti anche essere a 144 00:11:30,830 --> 00:11:36,980 conoscenza, dovresti essere consapevole di come lavorare con le icone, come aggiungere icone all'interno della tua app ed 145 00:11:36,980 --> 00:11:39,370 è quindi quello che faremo dopo.