Ora che abbiamo lavorato sul testo
qui, per uno ora possiamo tornare all'app. js e sbarazzarsi di questo cambiamento temporaneo qui in
cui mostriamo
sempre il gioco sullo schermo, non vogliamo più farlo, invece vogliamo ricominciare con la normale schermata
di avvio del gioco e oltre a questo cambiamento, ora anche io vuoi fare un ulteriore aggiustamento e questo è questo pulsante di
avvio del gioco.
Stiamo usando il pulsante normale qui che ovviamente è qualcosa che puoi fare ma a volte vuoi anche
creare il tuo pulsante, vuoi avere il pieno controllo su come appare il tuo pulsante e per
questo, puoi ovviamente crearne uno tuo pulsante ed è esattamente quello che faremo ora.
Quindi nella cartella componenti, aggiungerò il mio pulsante e puoi nominarlo come preferisci,
potresti
nominarlo pulsante ma questo è già il nome
di quello incorporato e mentre puoi ovviamente nominare il tuo come questo, per evitare qualsiasi scontro o confusione di
nomi, nominerò il mio pulsante qui pulsante principale perché sarà il mio pulsante principale, che uso per le grandi azioni in
questo gioco come
l'avvio di un nuovo gioco.
Ora che è il nome del file lì dentro, avremo ovviamente un normale componente
React, quindi importiamo React.
Importiamo una vista qui, avremo sicuramente bisogno di un
po 'di testo, avremo sicuramente bisogno di un foglio di stile di React Native come questo
e poi qui, abbiamo il componente pulsante principale che riceve oggetti di scena e che alla
fine restituirà alcuni jsx. Avremo i nostri oggetti oggetto con il foglio di stile. creare e
come sempre, esporteremo il nostro pulsante principale.
E ora la domanda è: come si costruisce il proprio pulsante?
Ora potrebbe sembrare molto complesso farlo, ma in realtà non lo è. Il tuo pulsante è anche solo una
combinazione di visualizzazione e testo e molto importante, anche un componente tangibile, come evidenziazione tangibile o opacità tangibile o
feedback nativo toccabile o persino toccabile senza feedback se non
vuoi dare alcun feedback visivo. Quindi qui andrò con un'opacità tangibile e abbiamo bisogno
che per dare un feedback all'utente sul fatto che il pulsante è stato premuto e per registrare un evento onPress e oltre
a questo, costruiremo semplicemente il nostro pulsante con una vista che abbiamo disegnato in un certo modo e
un testo lì dentro.
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
pulsante e lì dentro, forse un testo per un testo che dovrebbe avere un pulsante.
Ora diciamo che il nostro pulsante dovrebbe essere utilizzabile in modo tale che abbiamo passato
un testo direttamente tra
i tag di apertura e chiusura del nostro componente, quindi qui possiamo
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
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ò
l'ascoltatore onPress e noi dovrò fare qualcosa lì.
Quindi ora otteniamo lo scheletro per il nostro pulsante, ora
possiamo iniziare ad aggiungere alcuni stili ad esso.
Ora ovviamente puoi modellare quel pulsante nel modo che preferisci, qui ho in mente
un certo stile che aggiungerò,
ma di nuovo, sicuramente ci gioco e applico i tuoi stili.
Quindi per il pulsante stesso che è la vista intorno al testo, voglio dare al pulsante un certo
colore di sfondo e puoi anche assicurarti che questo possa essere impostato
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
costanti / colori, colori come questo e poi qui userò il colore primario, forse il colore primario, così.
Quindi questo è il colore di sfondo che dovrebbe avere questo pulsante, di nuovo puoi anche assicurarti che
questo stile sia impostato in modo dinamico con l'aiuto di qualche oggetto che stai
ottenendo dall'esterno ma qui, lo codificherò qui.
Inoltre, il pulsante dovrebbe avere un'imbottitura in modo che il testo non si
trovi direttamente sui bordi
del contenitore dei pulsanti, quindi della casella attorno al testo ma c'è una spaziatura e puoi usare
la stessa imbottitura in tutte le direzioni ma voglio
usare un'imbottitura verticale di 12, quindi non molta imbottitura in alto e in basso e un'imbottitura orizzontale diciamo 30,
quindi molta più imbottitura a sinistra e a destra.
Questo è il pulsante, ora per il testo del pulsante, c'è anche il
colore del bianco che dovrebbe apparire bene sul nostro colore primario, potresti usare anche il
nero perché il nostro colore primario è in realtà un colore in cui, come puoi vedere, sia bianco che il
nero funziona davvero, quindi puoi usare
entrambi ma andrò con il bianco qui per il pulsante e aggiungerò una famiglia di caratteri di sans aperti per usare anche
questo carattere personalizzato lì, come hai imparato, devi impostarlo su ogni testo, non c'è ereditarietà, non c'è alcun carattere globale
che puoi impostare, ogni testo che dovrebbe usare questo carattere ha bisogno di ottenerlo e aggiungerò una dimensione
del carattere diciamo 18 per avere un testo più grande qui in questo pulsante . Ora, quando si preme il pulsante, in realtà ovviamente in
genere non voglio gestire questo evento di stampa all'interno del pulsante ma all'interno del
componente in cui utilizziamo il pulsante.
Quindi voglio semplicemente inoltrarlo e per
questo, possiamo semplicemente aspettarci di ottenere un riferimento di funzione, una funzione di gestore di eventi sul diciamo sul
pulsante Prop sul nostro pulsante personalizzato, ma puoi nominare
questo prop qualunque, puoi chiamarlo suClicca perché in Alla fine, sei tu che usi il tuo
pulsante e
lì devi solo assicurarti di passare un riferimento alla funzione di adattamento, un puntatore di adattamento a una
funzione del gestore di eventi su onPress o qualunque cosa tu lo chiami prop sul tuo pulsante.
Quindi questo nome
dipende da te, ora usiamo il pulsante principale e usiamolo
nella schermata di avvio del gioco. Lì possiamo semplicemente importarlo,
quindi importare il pulsante principale da componenti / MainButton e questo pulsante principale ora viene utilizzato qui per iniziare un nuovo
gioco.
Quindi sostituirò il pulsante qui con il pulsante principale,
ma tieni presente che su questo pulsante ho configurato il contenuto, il testo da mostrare in modo tale che sia effettivamente
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
titolo qui non
viene più passato su un oggetto di proprietà del titolo ma invece, ora abbiamo un tag di apertura
e chiusura per il nostro pulsante e aggiungiamo l'inizio del gioco lì.
Ora onPress è ancora un oggetto di scena che lasciamo qui perché nel pulsante principale, inoltro l'evento onPress, per
così dire, alla funzione che ottengo da solo sul mio oggetto di stampa
qui, quindi dobbiamo impostare il supporto di onPress sul nostro pulsante e quindi con ciò, dovremmo avere un bel pulsante
principale qui, un bel pulsante quando iniziamo una nuova partita.
Proviamo qui, ecco
come appare e secondo me sembra molto carino, un bel pulsante.
Non ho ancora
finito, voglio avere angoli arrotondati su quel pulsante e per quello, tornando
al file del pulsante principale, possiamo ovviamente semplicemente andare a questa proprietà del pulsante qui
nel foglio di stile che è l'oggetto di stile che viene applicato al nostro vista e lì, possiamo aggiungere un raggio di confine
di 25 e se lo facciamo, allora vedrai che se ora ottengo questo pulsante, ora ha questo bell'aspetto qui.
Lascia che lo mostri anche su Android, ora ha gli angoli arrotondati e ha questo piacevole effetto opacità quando
lo
tocchi e, come già accennato in precedenza, puoi cambiare questo effetto opacità andando al componente di
opacità toccabile e lì, puoi imposta l'opacità attiva sul livello di opacità che vuoi avere quando viene premuto, ad
esempio se usi
un valore piuttosto elevato qui, allora questo effetto è meno forte, ora è solo
leggermente trasparente quando lo tocchiamo e non trasparente come prima. Ma dipende da te quello che vuoi
qui,
lo farò io. 6 qui per avere un effetto
leggermente più forte, ma di nuovo è qualcosa che puoi configurare e in generale, il mio suggerimento sarebbe di giocare con
quello e vedere come puoi modellare quel pulsante, come puoi davvero adattarlo alle tue esigenze. Ora con il pulsante personalizzato aggiunto, voglio
anche usarlo sul gioco
sullo schermo, quindi
lì, importerò anche il pulsante principale da componenti / MainButton come questo e quindi aggiungerò semplicemente quel
pulsante principale qui quando mostriamo il nostro nuovo pulsante di gioco laggiù.
Usa invece il pulsante principale, quindi rimuovi l'elica del titolo perché non è
così che stiamo impostando il titolo
sul nostro pulsante personalizzato, invece dobbiamo passarlo qui tra i tag di apertura e chiusura dei tag dei nostri componenti personalizzati.
Quindi ora qui, questo dovrebbe anche apparire più bello se finiamo rapidamente un gioco qui, cercando di far indovinare il computer
33, eccoci qui
e ora vediamo anche il bel pulsante qui.
Vediamo anche l'output corretto qui per quanto riguarda il numero di round
che ha
richiesto e il numero che abbiamo dovuto indovinare e possiamo iniziare un nuovo gioco da quel
momento in poi e anche ripassarlo molto velocemente, sì, è tutto molto bello.
La cosa rimanente che ora voglio ancora fare è che voglio lavorare su questi due pulsanti, inferiore e superiore.
Sembrano un po
'noiosi, direi, possiamo sicuramente renderli più eccitanti. Ora un modo per renderli un po 'più eccitanti è
usare anche qui il nostro pulsante personalizzato.
Quindi ovviamente qui nella schermata di gioco, possiamo anche importare il pulsante principale da componenti / MainButton, quindi il nostro
pulsante personalizzato e usarlo al posto del pulsante che stiamo attualmente utilizzando, che
è incorporato. Quindi usa
il nostro pulsante qui, quindi ovviamente sposta il titolo tra i tag di
apertura e chiusura, quindi qui è più basso e poi qui per il secondo pulsante, è più
grande e ora dovrebbe apparire un po 'più bello se iniziamo un nuovo gioco qui .
Ora usiamo i nostri pulsanti personalizzati qui, anche se ora vediamo anche
un problema, ci sono semplicemente un po 'troppo grandi, ci sono troppo vicini
l'uno all'altro, possiamo cambiarlo però scendendo nel contenitore dei pulsanti e dandogli un po' più larghezza, forse
impostare la larghezza massima al 90% qui in realtà.
Quindi ora se proviamo di nuovo, sì, sembra un po 'meglio, c'è almeno un po' di spazio tra i pulsanti e
per ora questo lo farà perché per ora, non stiamo ottimizzando per tutte le dimensioni dello schermo.
Aumentiamo anche questa larghezza qui a 400 in modo da avere abbastanza larghezza, in
realtà usiamo 400 pixel e ora questo sembra buono qui su iOS e
anche su Android. Ora sembra un po 'meglio
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
anche fare il trucco e non
abbiamo usato icone finora spesso ne hai bisogno nelle app mobili. È sicuramente qualcosa di cui dovresti anche essere a
conoscenza, dovresti essere consapevole di come lavorare con le icone, come aggiungere icone all'interno della tua app ed
è quindi quello che faremo dopo.