Sta a te decidere come modellare questo testo di conferma qui o in realtà non dovrebbe essere solo
testo, dovrebbe essere una vista con il testo lì dentro che genera il nostro numero e quindi un pulsante per iniziare il
gioco e puoi sicuramente mettere in pausa il video a questo punto e vieni con il tuo stile lì,
il tuo layout.
Ho in mente un determinato layout che sicuramente differirà dal tuo ma non c'è
nessuna decisione sbagliata o giusta qui, quindi sicuramente prendi questa come un'altra possibilità per inventare il tuo
layout per questo e un pulsante che in questo momento non fa nulla ma è lì
che consentirebbe all'utente di iniziare il gioco e dopo una breve pausa che puoi utilizzare per mettere in pausa
il video, implementerò la mia soluzione insieme a te.
Quindi ecco come penso che sarebbe bello.
Voglio avere una vista in modo da poter creare un contenitore generale attorno a quella o in realtà forse non una vista,
ma perché non usiamo la nostra carta
qui, sembra una buona idea.
Ora quella carta, se la guardiamo, non ha un margine e voglio avere uno spazio tra
quella carta in alto e la mia carta riassuntiva.
Quindi quindi qui, darò uno stile separato qui nel mio foglio di stile, nella schermata di avvio
del gioco, nominerò questo contenitore di riepilogo, il nome come sempre dipende da te
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
selezionato e poi in una nuova riga emetti il numero in un modo ben presentato, forse il numero in una specie di
casella con un bordo separato con angoli arrotondati in modo che sia chiaramente visibile o
anche più grande dell'altro testo e quindi qui, aggiungerò una vista con
un testo lì dentro e in quel testo, avrò il numero selezionato ma ora che vista e
il testo dovrebbe avere uno stile speciale e poiché ho intenzione di riutilizzarlo, in realtà
lo afferrerò e
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
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,
quindi impostiamo un foglio di stile anche con foglio di stile. crea laggiù e quindi in questo componente, restituirò questa cosa
di visualizzazione qui con il numero selezionato che ora deve comunque essere passato e mi aspetto che lo
ottenga tra i tag di apertura e chiusura del mio componente con l'aiuto di
oggetti di scena per bambini.
Ora questo contenitore ovviamente è qualcosa che puoi configurare
liberamente, aggiungerò solo uno stile di contenitore, qui il nome del contenitore dove penso che una larghezza del bordo di due potrebbe
sembrare buona, quindi un po 'più di un bordo più ampio. Un colore del bordo in cui voglio effettivamente usare il mio colore primario
o il mio accento, vedremo quale sembra migliore.
Quindi importiamo i colori da costanti / Colori e per il colore del bordo, quindi usiamo l'accento di colori
per ora e vediamo come appare. Qualche imbottitura in modo che il numero non
sia direttamente sui bordi della casella
circostante, non si trovi direttamente accanto al bordo, un raggio del bordo di 10 per avere dei bordi arrotondati,
alcuni
angoli arrotondati mi scusano, a proposito se vuoi scegliere come target i singoli angoli, puoi farlo
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
dell'utente se si tratta di una lingua da sinistra a destra o da destra a sinistra in modo
da poter scegliere come target tutti i singoli anche gli angoli o imposta un raggio per tutti gli angoli con raggio del
bordo e aggiungi anche un piccolo margine qui, un margine verticale di 10 forse per avere una spaziatura nella parte superiore e
inferiore intorno a questo contenitore qui e anche importante, centrare il testo lì dentro con allinea il centro articoli e
giustifica il Centro contenuti sfruttando il comportamento del box flessibile. E con questo, voglio anche dare il numero stesso, quindi il testo un
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
davvero e più tardi , utilizzeremo anche un carattere personalizzato. E quindi questa vista qui ottiene lo stile
del contenitore e il testo qui ovviamente riceve lo stile del numero. Con questa configurazione, possiamo usare il contenitore dei numeri nella schermata
di avvio del gioco, quindi aggiungiamo semplicemente l'importazione e quello che stiamo facendo qui è
abbastanza normale, che tu abbia più componenti di cui componi la tua applicazione.
Quindi ora possiamo usare il contenitore dei numeri nel componente della schermata di avvio del gioco, aggiungerlo qui sotto questo testo
e nel contenitore dei numeri, otteniamo il contenuto qui con i figli dei puntelli, lo produciamo con i figli dei
puntelli, ciò significa che dobbiamo passarlo tra i tag
di apertura e chiusura, quindi qui inoltriamo il numero selezionato.
Ora questo è solo il mio suggerimento su come potremmo modellare questo, ma mi
piace lo stile e quindi per il momento, aggiungerò qui un pulsante che è un tag a chiusura automatica,
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 è
ciò che otteniamo e non sembra troppo brutto direi. Tuttavia, ci sono due cose che
voglio cambiare, questo testo qui dovrebbe essere centrato e questa casella con il numero
non dovrebbe essere larga come la casella circostante ma essere larga quanto il numero deve essere.
Ora per far funzionare entrambi, andrò sulla mia carta che contiene tutto il contenuto qui e con quello, voglio
dire vado allo stile nella schermata di avvio del
gioco che uso
anche su quella carta, questo è il mio contenitore di riepilogo e lì abbiamo può allineare gli elementi lì dentro da centrare, invece di usare
il default che sarebbe allungato e ora questo è automaticamente centrato e la casella è larga solo
quanto il numero richiede che sia.
Ora che non sembra troppo malandato, un'ultima
cosa che ho appena notato è anche che quando confermiamo un input, voglio anche usare l'API della
tastiera per chiudere la tastiera in modo che non appena premiamo conferma qui, chiudiamo anche la tastiera e ora
abbiamo un bel risultato qui.
Ora, con questo, abbiamo un aspetto di base solido, direi, possiamo scegliere un
numero, stiamo facendo una convalida approssimativa per assicurarci di avere un numero valido e il passo successivo è far funzionare
questo pulsante di avvio del gioco e scambiamo ciò che vediamo sullo schermo qui per il nostro gioco è in esecuzione
schermata in cui il computer ora sta facendo ipotesi e quindi ci assicuriamo di dare all'utente la possibilità di
dire se i numeri dovrebbero essere maggiori o inferiori
e poi il punto è finito e mostra un gioco sullo schermo.