1 00:00:02,310 --> 00:00:08,400 Sta a te decidere come modellare questo testo di conferma qui o in realtà non dovrebbe essere solo 2 00:00:08,400 --> 00:00:15,630 testo, dovrebbe essere una vista con il testo lì dentro che genera il nostro numero e quindi un pulsante per iniziare il 3 00:00:15,630 --> 00:00:21,780 gioco e puoi sicuramente mettere in pausa il video a questo punto e vieni con il tuo stile lì, 4 00:00:21,780 --> 00:00:23,050 il tuo layout. 5 00:00:23,100 --> 00:00:27,510 Ho in mente un determinato layout che sicuramente differirà dal tuo ma non c'è 6 00:00:27,510 --> 00:00:32,430 nessuna decisione sbagliata o giusta qui, quindi sicuramente prendi questa come un'altra possibilità per inventare il tuo 7 00:00:32,430 --> 00:00:36,990 layout per questo e un pulsante che in questo momento non fa nulla ma è lì 8 00:00:36,990 --> 00:00:42,520 che consentirebbe all'utente di iniziare il gioco e dopo una breve pausa che puoi utilizzare per mettere in pausa 9 00:00:42,520 --> 00:00:45,370 il video, implementerò la mia soluzione insieme a te. 10 00:00:45,420 --> 00:00:49,020 Quindi ecco come penso che sarebbe bello. 11 00:00:49,050 --> 00:00:55,640 Voglio avere una vista in modo da poter creare un contenitore generale attorno a quella o in realtà forse non una vista, 12 00:00:55,650 --> 00:00:57,720 ma perché non usiamo la nostra carta 13 00:00:57,720 --> 00:00:59,680 qui, sembra una buona idea. 14 00:00:59,730 --> 00:01:04,980 Ora quella carta, se la guardiamo, non ha un margine e voglio avere uno spazio tra 15 00:01:04,980 --> 00:01:07,950 quella carta in alto e la mia carta riassuntiva. 16 00:01:08,070 --> 00:01:15,540 Quindi quindi qui, darò uno stile separato qui nel mio foglio di stile, nella schermata di avvio 17 00:01:15,540 --> 00:01:21,570 del gioco, nominerò questo contenitore di riepilogo, il nome come sempre dipende da te 18 00:01:21,570 --> 00:01:35,400 e voglio avere un margine in cima a Let's diciamo 20, un po 'di spazio qui e aggiungilo tramite il puntello di stile alla scheda qui e là, voglio dire che hai 19 00:01:35,400 --> 00:01:44,710 selezionato e poi in una nuova riga emetti il numero in un modo ben presentato, forse il numero in una specie di 20 00:01:44,710 --> 00:01:51,160 casella con un bordo separato con angoli arrotondati in modo che sia chiaramente visibile o 21 00:01:51,310 --> 00:01:56,740 anche più grande dell'altro testo e quindi qui, aggiungerò una vista con 22 00:01:56,740 --> 00:02:04,070 un testo lì dentro e in quel testo, avrò il numero selezionato ma ora che vista e 23 00:02:04,620 --> 00:02:11,030 il testo dovrebbe avere uno stile speciale e poiché ho intenzione di riutilizzarlo, in realtà 24 00:02:11,030 --> 00:02:12,690 lo afferrerò e 25 00:02:12,800 --> 00:02:24,080 lo esternalizzerò in un nuovo componente e lo chiamerò contenitore di numeri. In questo componente, importerò React da React e importerò la vista e il testo da React Native 26 00:02:25,300 --> 00:02:33,850 e quindi avrò il componente contenitore dei numeri qui, esporremo il contenitore dei numeri predefinito e ovviamente avremo anche bisogno di un foglio di stile qui, 27 00:02:34,090 --> 00:02:41,880 quindi impostiamo un foglio di stile anche con foglio di stile. crea laggiù e quindi in questo componente, restituirò questa cosa 28 00:02:42,360 --> 00:02:49,320 di visualizzazione qui con il numero selezionato che ora deve comunque essere passato e mi aspetto che lo 29 00:02:49,530 --> 00:02:55,140 ottenga tra i tag di apertura e chiusura del mio componente con l'aiuto di 30 00:02:55,320 --> 00:02:57,800 oggetti di scena per bambini. 31 00:02:57,870 --> 00:03:02,270 Ora questo contenitore ovviamente è qualcosa che puoi configurare 32 00:03:02,370 --> 00:03:11,590 liberamente, aggiungerò solo uno stile di contenitore, qui il nome del contenitore dove penso che una larghezza del bordo di due potrebbe 33 00:03:11,650 --> 00:03:20,650 sembrare buona, quindi un po 'più di un bordo più ampio. Un colore del bordo in cui voglio effettivamente usare il mio colore primario 34 00:03:20,680 --> 00:03:23,670 o il mio accento, vedremo quale sembra migliore. 35 00:03:23,770 --> 00:03:33,400 Quindi importiamo i colori da costanti / Colori e per il colore del bordo, quindi usiamo l'accento di colori 36 00:03:33,400 --> 00:03:39,670 per ora e vediamo come appare. Qualche imbottitura in modo che il numero non 37 00:03:39,670 --> 00:03:42,070 sia direttamente sui bordi della casella 38 00:03:42,080 --> 00:03:49,630 circostante, non si trovi direttamente accanto al bordo, un raggio del bordo di 10 per avere dei bordi arrotondati, 39 00:03:49,630 --> 00:03:50,440 alcuni 40 00:03:50,440 --> 00:03:56,940 angoli arrotondati mi scusano, a proposito se vuoi scegliere come target i singoli angoli, puoi farlo 41 00:03:57,120 --> 00:04:06,780 con il bordo in alto a sinistra, il raggio in alto a destra, l'estremità in alto e l'inizio in alto tiene conto anche delle impostazioni 42 00:04:06,780 --> 00:04:13,980 dell'utente se si tratta di una lingua da sinistra a destra o da destra a sinistra in modo 43 00:04:13,980 --> 00:04:22,820 da poter scegliere come target tutti i singoli anche gli angoli o imposta un raggio per tutti gli angoli con raggio del 44 00:04:23,340 --> 00:04:32,120 bordo e aggiungi anche un piccolo margine qui, un margine verticale di 10 forse per avere una spaziatura nella parte superiore e 45 00:04:32,300 --> 00:04:40,340 inferiore intorno a questo contenitore qui e anche importante, centrare il testo lì dentro con allinea il centro articoli e 46 00:04:40,340 --> 00:04:48,740 giustifica il Centro contenuti sfruttando il comportamento del box flessibile. E con questo, voglio anche dare il numero stesso, quindi il testo un 47 00:04:48,740 --> 00:04:57,230 certo stile e quello stile è che do al testo anche quel colore di accento e voglio usare una dimensione del carattere di 22 per dovermi distinguere 48 00:04:57,230 --> 00:05:04,280 davvero e più tardi , utilizzeremo anche un carattere personalizzato. E quindi questa vista qui ottiene lo stile 49 00:05:04,280 --> 00:05:13,830 del contenitore e il testo qui ovviamente riceve lo stile del numero. Con questa configurazione, possiamo usare il contenitore dei numeri nella schermata 50 00:05:13,830 --> 00:05:19,740 di avvio del gioco, quindi aggiungiamo semplicemente l'importazione e quello che stiamo facendo qui è 51 00:05:19,740 --> 00:05:25,000 abbastanza normale, che tu abbia più componenti di cui componi la tua applicazione. 52 00:05:25,160 --> 00:05:31,560 Quindi ora possiamo usare il contenitore dei numeri nel componente della schermata di avvio del gioco, aggiungerlo qui sotto questo testo 53 00:05:32,010 --> 00:05:38,160 e nel contenitore dei numeri, otteniamo il contenuto qui con i figli dei puntelli, lo produciamo con i figli dei 54 00:05:38,220 --> 00:05:41,190 puntelli, ciò significa che dobbiamo passarlo tra i tag 55 00:05:41,250 --> 00:05:44,370 di apertura e chiusura, quindi qui inoltriamo il numero selezionato. 56 00:05:44,580 --> 00:05:48,710 Ora questo è solo il mio suggerimento su come potremmo modellare questo, ma mi 57 00:05:48,900 --> 00:05:54,630 piace lo stile e quindi per il momento, aggiungerò qui un pulsante che è un tag a chiusura automatica, 58 00:05:55,080 --> 00:06:02,890 il pulsante integrato con un titolo di inizio gioco, tutto tappi per farlo risaltare davvero e salvare questo e ora se scegliamo un numero qui, questo è 59 00:06:02,940 --> 00:06:08,820 ciò che otteniamo e non sembra troppo brutto direi. Tuttavia, ci sono due cose che 60 00:06:08,820 --> 00:06:15,060 voglio cambiare, questo testo qui dovrebbe essere centrato e questa casella con il numero 61 00:06:15,330 --> 00:06:22,120 non dovrebbe essere larga come la casella circostante ma essere larga quanto il numero deve essere. 62 00:06:22,860 --> 00:06:30,260 Ora per far funzionare entrambi, andrò sulla mia carta che contiene tutto il contenuto qui e con quello, voglio 63 00:06:30,260 --> 00:06:33,900 dire vado allo stile nella schermata di avvio del 64 00:06:34,040 --> 00:06:35,480 gioco che uso 65 00:06:35,750 --> 00:06:45,400 anche su quella carta, questo è il mio contenitore di riepilogo e lì abbiamo può allineare gli elementi lì dentro da centrare, invece di usare 66 00:06:45,400 --> 00:06:52,280 il default che sarebbe allungato e ora questo è automaticamente centrato e la casella è larga solo 67 00:06:52,280 --> 00:06:54,610 quanto il numero richiede che sia. 68 00:06:54,700 --> 00:06:57,360 Ora che non sembra troppo malandato, un'ultima 69 00:06:57,370 --> 00:07:03,160 cosa che ho appena notato è anche che quando confermiamo un input, voglio anche usare l'API della 70 00:07:03,190 --> 00:07:09,940 tastiera per chiudere la tastiera in modo che non appena premiamo conferma qui, chiudiamo anche la tastiera e ora 71 00:07:10,180 --> 00:07:12,220 abbiamo un bel risultato qui. 72 00:07:12,220 --> 00:07:16,180 Ora, con questo, abbiamo un aspetto di base solido, direi, possiamo scegliere un 73 00:07:16,180 --> 00:07:22,210 numero, stiamo facendo una convalida approssimativa per assicurarci di avere un numero valido e il passo successivo è far funzionare 74 00:07:22,210 --> 00:07:28,540 questo pulsante di avvio del gioco e scambiamo ciò che vediamo sullo schermo qui per il nostro gioco è in esecuzione 75 00:07:28,540 --> 00:07:34,540 schermata in cui il computer ora sta facendo ipotesi e quindi ci assicuriamo di dare all'utente la possibilità di 76 00:07:34,540 --> 00:07:37,850 dire se i numeri dovrebbero essere maggiori o inferiori 77 00:07:37,990 --> 00:07:41,770 e poi il punto è finito e mostra un gioco sullo schermo.