Quindi, come detto, sono tornato al progetto a cui abbiamo lavorato e ovviamente ora la schermata
di modifica del prodotto qui è
ciò che mi interessa, questa è la schermata in cui ho questi input di testo qui con le mie etichette
e quindi il input di testo, dove attualmente disponiamo di
una gestione dell'input molto semplice, stiamo almeno recuperando l'input dell'utente e memorizzandolo con l'aiuto dello stato React, con
l'hook dello
stato use, stiamo quindi reinserendo i valori Android nell'input e basta.
Questo ci consente di acquisire e utilizzare l'input dell'utente, ma per uno, possiamo migliorare il modo in cui lo facciamo,
possiamo scriverlo in un modo più riutilizzabile e non stiamo facendo alcuna convalida di sorta, quindi
queste sono le cose che voglio cambiare in questo modulo.
Inoltre, non stiamo configurando i nostri input in alcun modo, ciò significa che in
questo momento tutti gli input di testo sono uguali.
Non cambiamo il tipo di tastiera che presentiamo,
non offriamo input multilinea ad esempio per testi più lunghi come qui per la descrizione,
nulla di tutto ciò sta accadendo e quindi iniziamo effettivamente con la configurazione di questi
input prima di procedere alla convalida e così via. Una configurazione importante che è possibile aggiungere alle tastiere
è il tipo di tastiera. Il tipo di tastiera prop può essere impostato e lì hai un paio di valori disponibili. Ora hai un bel po 'di
valori qui, ma i documenti ufficiali sono anche un posto che dovresti consultare quando pensi al tipo che
vuoi assegnare qui perché quando visiti la documentazione ufficiale di inserimento del testo, ovviamente vedi alcuni esempi ma poi vedi
anche tutti gli oggetti di scena che hai e lì, puoi saperne di più su ogni
oggetto e su come puoi configurarlo e, ad esempio, per
il tipo di tastiera, abbiamo appreso che solo questi tipi sono supportati su più piattaforme.
Pertanto, mentre abbiamo a disposizione specifici tipi di iOS e Android, questi tipi possono essere utilizzati solo insieme a un controllo
della piattaforma in modo da assicurarti
di non utilizzare il tipo su Android che non è supportato lì e che quindi non
avrebbe alcun effetto.
Quindi, mi atterrò ai tipi multipiattaforma, in modo da non dover aggiungere un ulteriore controllo della piattaforma e lì, in genere, diciamo
testo normale, resteremmo ai valori predefiniti, che ovviamente è un tipo che non abbiamo dobbiamo assegnare, ma ad
esempio ciò cambia quando diamo un'occhiata al nostro input di prezzo. Lì voglio assicurarmi che le persone inseriscano solo numeri validi,
che non inseriscano alcun testo e quindi ovviamente voglio mostrare la tastiera giusta per aiutarli in questo e se diamo
un'occhiata alla documentazione ufficiale, vediamo che ci sono tre
principali tipi di tastiere multipiattaforma che possiamo mostrare: tastierino numerico, tastierino decimale e tastierino numerico
e lì ad esempio il tastierino decimale è un input che consente all'utente di inserire numeri decimali che è proprio quello
che voglio qui per il mio prezzo. Quindi l'impostazione di questo tipo di tastiera qui
ha molto senso perché ora se diamo un'occhiata a questo input
di prezzo qui e seleziono la tastiera software che puoi fare con il comando k scorciatoia qui su iOS o
con il menu hardware lassù, poi tastiera, attiva o disattiva la tastiera del software, vedi che ora ho questa tastiera decimale che si apre
qui mentre sugli altri input, ho una normale tastiera di testo e, naturalmente, è lo
stesso su Android.
Se andiamo all'amministratore lì e poi diamo un'occhiata al prezzo, vediamo anche che lì, ci viene presentato
questo input intuitivo anziché la normale tastiera di testo che otteniamo sugli altri campi di input.
Quindi è così che possiamo configurarlo e questa è ovviamente una configurazione importante. Possiamo anche configurare altre cose,
ad esempio qui sull'input del titolo qui.
Se colpisci lo spazio di controllo e dai un'occhiata al completamento automatico, vedi che ci sono un sacco di cose
che puoi configurare, ad esempio se questo dovrebbe essere auto-capitalizzato. Lì hai diversi valori che puoi
impostare, ad esempio quel personaggio deve essere in maiuscolo, solo frasi o parole complete
e qui, ad esempio, cercherò frasi complete per aiutare a capitalizzare quelle.
Puoi anche attivare la correzione automatica e aggiungendolo in questo modo, assicurati che la correzione automatica sia
attivata per questo input, impostandolo su false, potresti disabilitarlo o semplicemente omettendolo, ovviamente è
anche un'opzione e così via . Ci sono un sacco di cose che puoi
configurare e ti consiglio vivamente come sempre di dare un'occhiata ai documenti ufficiali e di conoscere le
opzioni di configurazione disponibili e cosa
fanno, anche semplicemente giocare con quelle in modo da ottenere un idea di cosa puoi fare lì e cosa fa
ogni opzione e cosa potrebbe avere senso per la tua prossima applicazione. Un altro valore che voglio impostare ad esempio è il
tipo di chiave di ritorno.
Questo può essere impostato su un paio
di valori e di nuovo se controlli i documenti ufficiali, imparerai che non tutti i valori sono
disponibili su tutte le piattaforme, solo questi cinque sono disponibili su più piattaforme e lì, puoi sostanzialmente configurare questo
pulsante in fondo angolo destro. Se dai un'occhiata al tuo input
qui e fai clic su uno qualsiasi degli input, è questo pulsante qui nell'angolo in basso a destra che
dice return here for imageUrl. Ora sul titolo, l'ho impostato su successivo,
quindi se fai clic nel campo del titolo, ora vedi qui che dice più ampio, che è tedesco per il prossimo e
questo è solo perché ho un emulatore tedesco qui e lasciami anche riavviare questo su Android perché si è bloccato in
modo da poterlo mostrare anche lì.
Se andiamo al nostro input lì, fai clic sul titolo, vedi questo pulsante successivo qui, su imageUrl, hai
questo pulsante fatto qui e che può essere configurato con il tipo di chiave di
ritorno, anche se tieni presente che questo controlla solo come questo viene visualizzato, ciò che dice lì, qual è
l'etichetta lì o quale tipo di pulsante
viene presentato, non cambia automaticamente ciò che fa questo pulsante, ad esempio se faccio clic sul pulsante più largo,
questa tastiera
si chiude, lo stesso vale se Faccio clic sul tasto Invio qui.
Ora, quando parliamo dei comportamenti degli input di testo, allora tutti gli eventi che possiamo ascoltare sono interessanti.
Con on, hai un'idea di tutti gli eventi che puoi ascoltare e, ad
esempio, hai avuto onBlur che si attiva ogni volta che un input perde lo stato attivo, onChange si attiva, quindi ad ogni sequenza
di tasti e ti dà l'intero evento di input, onChangeText che attiva anche ad ogni battitura ma ti dà solo il
testo che è stato inserito, che in genere è ciò che ti interessa di più.
onEndEditing dove possiamo anche avere un'idea di quando si attiva, quindi se accedo onEndEditing qui, vediamo quando questo viene stampato nella
console, se ora vado qui
al mio input e si prega di notare che sono sull'input del titolo, quindi se Digito lì test, vediamo che non si
è attivato qui, se clicco fuori
da questo, ora ha sparato su EndEditing. Lo stesso vale se, ad esempio, faccio clic
sul pulsante più largo, quindi praticamente ogni volta che lasciamo questa tastiera focalizzata o in generale quando facciamo clic anche
su quel pulsante fatto.
Inoltre, abbiamo anche altri ascoltatori, ad esempio onFocus che ovviamente si attiva quando questo input diventa attivo
o anche su SelectionChange quando selezioniamo il testo lì o onSubmitEditing che viene attivato quando si fa clic su questo pulsante di ritorno,
quindi se aggiungoSubmitEditing qui, quando
aggiungi anche questo listener e aggiungi anche un'istruzione di registro della console, vedi che ora si attiverà, ogni volta che scrivo qui,
non si attiva, ogni volta che clicco fuori da qui, inoltre non si attiva, otteniamo solo onEndEditing accedi
qui ma
si attiverà se premo il tasto più largo qui, lì vedi suSubmitEditing, quindi questo è un
ascoltatore che utilizzeresti per
ascoltare quando si fa clic sul tasto Invio e quindi puoi fare quello che
vuoi fare, come inviare il tuo dati o spostare automaticamente lo stato attivo sull'input successivo
con l'aiuto di riferimenti, ad esempio se si desidera.
Ecco come puoi configurarlo e come ho detto, ti consiglio di immergerti in
questo per avere un'idea di
come funziona, ora passerò comunque e voglio assicurarmi che non ascoltiamo solo gli input e memorizziamo
i valori ma convalidiamo anche ciò che l'utente immette.