Ora abbiamo iniziato a lavorare sull'input e non sembra troppo male, ma vogliamo assicurarci
che gli utenti possano inserire solo numeri che sono solo cifre e che non possiamo inserire un punto qui o una virgola o
incollare in alcuni non- contenuto numerico e
per questo, ovviamente, dobbiamo convalidare ciò che l'utente ha inserito qui.
Ora, per convalidare ciò che l'utente ha inserito, voglio, come già mostrato in precedenza, sostanzialmente salvare il valore che
l'utente
ha inserito ad ogni sequenza di tasti e reinserirlo nell'input ma dopo
ogni sequenza di tasti, voglio anche convalidare l'input per rendere certo che abbiamo un
valore valido lì, quindi sostanzialmente un numero. Per prima cosa, dobbiamo gestire un po
'di stato qui nella schermata di avvio del gioco, quindi importerò lo stato d'uso e poi quassù all'inizio di questo componente, imposterò la mia chiamata
dello stato d'uso, quindi registra un po' stato e quello sarà il valore inserito e anche se in seguito
sarà un numero, tecnicamente è una stringa all'inizio perché tutto l'input è solo una
stringa e
devi convertirlo manualmente in un numero, se vuoi. Aggiungerò anche una funzione di valore immesso qui,
il secondo elemento che recuperiamo dallo stato di utilizzo dell'array ci dà
e ora possiamo aggiungere una costante qui che nominerò il gestore dell'input del numero o come si desidera nominarlo.
Questo otterrà il testo di input e questa è la funzione perché è solo una funzione
che sto memorizzando in questa costante che voglio connettere al mio input e lì a onChangeText, puntare al
gestore di input numerico e reinserire
il valore e questo è il nostro valore inserito.
Ora normalmente diremmo di impostare qui il valore inserito e impostare il testo di input come il
nostro nuovo valore inserito che
inseriamo nuovamente nell'input ma qui, in realtà, prima di tutto convaliderò l'input.
Quindi quello che farò qui è che non imposterò il mio valore inserito
direttamente sul testo qui, invece lo imposterò sul mio testo di input dove lo sostituisco e posso chiamare sostituire perché il testo di input sarà
una stringa e questo è un normale metodo Javascript che esiste sulle stringhe, in cui sostituisco alcuni
contenuti basati su un'espressione regolare. Ora le espressioni regolari possono essere
spaventose ma è semplice, lo creiamo con due barre in avanti e lì dentro aggiungerò parentesi quadre e fondamentalmente con questa espressione
dire che sto sostituendo tutto ciò che non è un numero da 0 a 9, quindi non un numero, a livello globale nell'intero testo,
ciò significa che non solo cercherà il primo hit, ma cercherà l'intero testo, lo sostituirò con una
stringa vuota,
quindi praticamente lascerò cadere qualsiasi non-numero di valore. Questo è ciò che sta accadendo qui ed è ciò
che memorizzo nel mio nuovo stato
e con ciò, dovremmo assicurarci che l'utente non possa inserire nulla che non sia un numero.
Quindi controlliamo qui su
Android, se premo la virgola, vedrai che viene immediatamente rimosso e questo è esattamente ciò
di cui abbiamo bisogno qui, consentiamo solo valori numerici.
Quindi è un po 'di convalida che abbiamo messo in
atto qui, non è tutto ciò che voglio però, ma non abbiamo ancora finito con l'input perché su iOS, se siamo in quella modalità
di input e vogliamo chiudere quella tastiera, proprio ora non è davvero fattibile.
Non possiamo fare clic all'esterno e chiuderlo e sarebbe bello se potessimo. Ora per assicurarmi che possiamo e che chiudiamo la
tastiera se l'utente tocca da qualche altra parte, in
effetti avvolgerò l'intera vista qui con un componente speciale fornito da React Native e che è il componente toccabile senza
feedback, quindi un componente che ci
consente registrare un ascoltatore di tocchi senza fornire alcun feedback visivo perché è esattamente ciò di
cui abbiamo bisogno qui.
Possiamo avvolgere tutto il nostro schermo con questo, quindi la
nostra intera vista può essere racchiusa con questo toccabile senza ascoltatore di feedback in modo che dentro o là,
ora possiamo registrarci o ascoltare l'evento della stampa e quando si verifica una stampa, voglio
chiudere la tastiera e, per questo, React Native ci fornisce un'API utile che possiamo importare da
React Native e questa è l'API della tastiera. Questo non è un componente ma è un'API in cui possiamo
interagire con il dispositivo nativo stesso, per così dire, in questo caso con la tastiera e qui premendo un pulsante, voglio
attivare una funzione e qui andrò con una semplice funzione in linea, una breve funzione anonima, puoi ovviamente usare anche una
funzione con nome, ma qui tutto quello che
voglio fare è chiamare la tastiera. respingere.
Questa è una funzione che questa API della tastiera che stiamo importando da React Native ci offre
e fa esattamente ciò
che i nomi suggeriscono, quindi ora se
tocchiamo qui, possiamo digitare ma se tocco da qualche altra parte, eliminiamo la tastiera e quella di Ovviamente accade su
entrambe le piattaforme e penso che sia un'esperienza utente migliore perché è quello che ti aspetteresti,
che chiudi la tastiera se tocchi altrove sullo schermo.