Quindi, passo dopo passo, stiamo facendo progressi, ciò che non siamo
in grado di fare è inserire un numero.
Beh, immagino che tecnicamente possiamo inserire un numero se in un certo senso troviamo il campo di input, eccolo qui ma
non è molto divertente cercarlo, sarebbe più bello se lo vedessi, no?
Quindi, diamo uno stile a quel campo di input, quel
campo di input di testo qui un po 'e proprio come prima in realtà, sono andato a farlo in un componente
separato.
Quindi, nella cartella dei componenti, aggiungerò il mio input. file js e lì dentro, come sempre importare React da React e
quindi importare input di testo da React Native e qui in realtà non avrò bisogno della vista
perché avremo solo l'immissione di testo qui in stile e configurata lì e quindi avremo
il costante di input qui che è il nostro componente funzionale, che alla fine esportiamo anche ovviamente e una cosa di cui
avremo sicuramente bisogno è il
foglio di stile perché ora dovrebbe essere disegnato qui in modo da avere un aspetto di input
predefinito che potremmo riutilizzare in questo se abbiamo bisogno di più input in luoghi
diversi e questa
è davvero la mentalità in cui devi entrare, creare componenti riutilizzabili in modo
da non dover copiare il codice o ripetere te stesso ma che puoi facilmente condividere i tuoi componenti
e creare facilmente le app vuoi dal tuo set di blocchi che crei da solo alla fine.
Quindi qui, i miei stili si oppongono a Stylesheet. creare, come quello, sembra buono e ora in quel componente, voglio
restituire un input di testo,
quindi questo input di testo incorporato.
Ora, naturalmente, la mia idea è che possiamo
modellarlo da qui, quindi assegniamo uno stile da lì, ma proprio come con la carta, sarebbe bello se potessimo anche impostare uno stile dall'esterno, come
una larghezza speciale o un bordo speciale, niente del genere. Per abilitarlo, ancora una volta passerò un oggetto
qui allo stile e per uno
prendo tutti i miei stili impostati nel mio oggetto stili e lì diciamo in una proprietà di
input che dobbiamo ancora aggiungere e inoltre, aggiungiamo anche tutti gli stili che stanno ottenendo dallo stile degli oggetti di scena in modo che
possiamo impostare anche gli stili dall'esterno e ora laggiù nel foglio di stile, possiamo aggiungere lo
stile di input per assegnare un certo stile all'input. Quindi qui, potremmo dare un'altezza di diciamo 30 che
dovrebbe essere un'altezza che sembra relativamente buona e per vedere qualcosa, voglio anche aggiungere un bordo in fondo.
Potresti anche aggiungere un bordo attorno all'intero input con colore e larghezza del bordo e così via, ma
mi piace quello sguardo in cui abbiamo solo un bordo sotto l'input ma è ovviamente totalmente soggettivo
e qualcosa che puoi impostare in base alle tue preferenze personali .
Solo un bordo in basso può essere impostato con il colore del bordo inferiore e ci andrò
con il grigio, un altro colore pre-costruito che possiamo usare con quella scorciatoia e dare a questo bordo inferiore anche una larghezza qui di uno,
aggiungere un margine verticale di 10 per avere una spaziatura attorno all'input, almeno in alto e
in basso e ora con quello, lo stile
di base per questo
input di testo è fatto, ora usiamolo nella schermata di gioco. Quindi lì, voglio importare il mio input dall'input della cartella dei
componenti, in questo modo e sostituire questo input di
testo qui con il mio input che alla fine avvolge naturalmente questo input di testo
incorporato.
Quindi usa
il mio input, elimina l'input di testo lassù di cui non abbiamo
più bisogno e ora se lo salviamo, lo vediamo un po 'ma è molto piccolo, riesci a malapena a vederlo qui su
iOS e diventa più grande mentre digiti, il che non è certo quello che vogliamo ovviamente.
Ovviamente non abbiamo finito, invece
di modellare la larghezza, vado alla schermata
di avvio del gioco, quindi
nel luogo in cui utilizziamo l'input e impostiamo lo styling qui
perché per me ha senso che abbiamo un po 'di generale stili che vogliamo sempre nel
componente di input, qualcosa come l'altezza o il bordo ma alcuni stili specifici, come quanto dovrebbe essere
grande,
quindi quanto dovrebbe essere largo, è qualcosa che vuoi impostare
nel luogo in cui usi effettivamente e quindi qui, aggiungerò questa proprietà di input nell'oggetto foglio di stile della schermata di avvio del gioco
e forse userò una larghezza di 50 pixel qui, che dovrebbe apparire bene e assegnarla al mio input personalizzato qui
con lo stile prop.
Quindi, ora possiamo indicare gli stili. input e con quello, avrà sempre quella larghezza
e se digitiamo lì, non lo
allarghiamo più, invece possiamo semplicemente scorrere automaticamente in quell'input.
Ora per questo input specifico, per questo layout specifico qui, sarebbe anche bello se il testo fosse
centrato
penso, per la maggior parte degli input vuoi quel comportamento predefinito di scrivere da sinistra a destra
e iniziare sul
bordo sinistro ma qui penso un po 'di testo centrato sarebbe bello e quindi nella schermata di avvio del gioco in cui
voglio avere questo centraggio qui, su questo input, possiamo
anche aggiungere la proprietà di allineamento del testo e impostarlo al centro e ora questo centrerà questo testo qui nel mezzo
come digitiamo ed è davvero
bello per aver inserito un numero quindi, in questo modo.
A proposito, in questo momento possiamo inserire qualsiasi
cosa lì dentro, quindi dobbiamo certamente configurare questo input e per questo se vado al componente
di input in cui utilizziamo l'input di testo, ci sono molte cose che possiamo configurare lì e in
realtà la migliore risorsa è sempre ovviamente la documentazione ufficiale. Lì nei documenti API, se ci vai e cerchi l'immissione
di testo, troverai non solo una spiegazione ma troverai anche tutti gli oggetti di scena che puoi impostare lì e puoi
impostare cose come se fossero multilinea o no ,
quanto può durare il testo.
Puoi anche impostare un testo
segnaposto, puoi impostare la correzione automatica e tutte quelle cose divertenti, quindi controlla
sicuramente questi documenti per trovare la proprietà specifica di cui potresti aver bisogno per il tuo caso d'uso.
Voglio essere in grado di impostare questi oggetti di scena, ma voglio essere in grado di impostarli dal
luogo in cui utilizzo il mio input personalizzato. Quindi non da qui perché ciò garantirebbe che utilizziamo
la stessa configurazione per tutti gli
input che potremmo avere nella nostra app, voglio avere maggiore flessibilità e impostare solo uno stile di base qui
e configurare l'input nel luogo in cui abbiamo quindi utilizzarlo anziché nel componente wrapper principale.
La cosa interessante è React e non è React Native, ma solo React in Javascript normale ha una
sintassi per questo.
Puoi prendere i tuoi oggetti di scena che stai ricevendo e distribuirli sul tuo componente in questo modo.
La sintassi potrebbe sembrare un po 'strana ma alla fine ciò che fa è prendere tutti
gli oggetti di scena che hai, tutti gli oggetti di scena che hai impostato qui e sostanzialmente li aggiunge al tuo componente come oggetti di scena.
Ora, se in seguito definisci altri oggetti di scena come lo stile e hai già
uno stile qui, questo stile sovrascriverà lo
stile che hai qui ed è in realtà quello che voglio perché se imposto uno stile sul mio
input dall'esterno, sicuramente voglio sovrascrivere questo con questo stile prop e aggiungere questo stile che è impostato lì a questo input di
testo ma
se si impostano altri oggetti di scena al di fuori di questo componente, quindi sul mio componente personalizzato, verranno
aggiunti all'input di testo e che ci consente di aggiungere tutti gli oggetti di scena che possiamo aggiungere sull'input
di testo anche sul nostro input, quindi sul nostro componente.
Quindi qui dove utilizziamo l'input, ora non possiamo solo aggiungere lo stile, ma possiamo anche aggiungere blurOnSubmit per esempio per assicurarci
che quando premiamo il pulsante di invio lì, perdiamo lo stato attivo
e chiudiamo la tastiera virtuale. Possiamo impostare autocapitalize su nessuno che è uno dei valori consentiti
lì se controlli i documenti. Puoi impostarlo su nessuno, frasi,
parole e così via, quindi non voglio attivare la maiuscola qui perché inseriremo solo il numero
ma anche perché voglio mostrarti diverse configurazioni che puoi impostare. Imposterò la correzione automatica qui su falso in
modo che non stiamo correggendo automaticamente l'input dell'utente e molto importante qui,
imposterò il tipo di tastiera su numerico, in modo che l'utente debba inserire un numero qui.
Qui imposterò la lunghezza massima su 2 in modo da poter inserire solo due cifre e non un numero molto
lungo perché questo gioco qui ed è solo una delle restrizioni che ho qui, è che questo gioco funziona solo
con un due cifre numero. Con tutto ciò impostato,
ora se torniamo indietro e commuto la mia tastiera virtuale, vedi che ottieni quella tastiera numerica qui
e puoi inserire solo due cifre lì e non più di quella, che è ovviamente esattamente quello che voglio.
Inoltre, qui su Android vediamo questo, se fai clic sul pulsante di conferma,
questo lo chiuderà, è grazie a quella cosa blurOnSubmit. Su iOS, un pulsante del genere non esiste qui, quindi lì,
dovremo effettivamente trovare una soluzione diversa per chiuderlo se tocchi altrove, ad esempio perché in questo
momento, non sta succedendo.
Ma la cosa buona è che ora abbiamo una tastiera che possiamo vedere e una tastiera in cui possiamo inserire numeri.
Una cosa che voglio cambiare è che in questo momento, posso anche inserire un separatore decimale qui.
Ora per sbarazzartene, puoi cambiare il tipo di tastiera in tastierino numerico e vedere tutti i tipi di tastiera disponibili, poiché sempre i
documenti ufficiali sono il posto dove andare, lì per l'immissione di testo, puoi immergerti in un tipo di
tastiera e trovare cosa puoi impostare, cosa funziona su tutte le piattaforme e cosa potresti impostare se
avessi un controllo che controlla su quale piattaforma stai eseguendo il codice di cui non abbiamo ancora
imparato.
Il tastierino numerico è supportato su entrambe le piattaforme e,
se lo imposti, ora hai un input in cui non puoi inserire un decimale qui, se
digiti qui e non puoi farlo su iOS. Su Android, sfortunatamente, puoi farlo, quindi dovremo
anche trovare una soluzione diversa.