Riferimento alle props di TextInput in React Native
React Native TextInput: riferimento cercabile alle props | We.Inc
Ogni prop di TextInput che ti serve in una tabella cercabile: textarea multiline, keyboardType, secureTextEntry, autoComplete, returnKeyType, submitBehavior e altro ancora.
TextInput è il componente base di React Native per il testo digitato. Tieni il suo valore nello state e aggiornalo da onChangeText, che ti passa la nuova stringa. Per una textarea, imposta multiline a true e aggiungi textAlignVertical: "top" così Android si comporta come iOS. keyboardType, autoComplete e secureTextEntry scelgono la tastiera, il suggerimento di compilazione automatica e il mascheramento della password.
Il riferimento ufficiale è un lungo elenco alfabetico. Questa pagina raccoglie le props che le persone cercano davvero, con i valori e i default reali, in una tabella che puoi filtrare per nome, valore o piattaforma. Scrivi multiline, password o android nella casella per restringere i risultati.
Scrivi una parola nella casella del filtro: il nome di una prop, un valore come decimal-pad o una piattaforma.
Le righe che corrispondono in qualunque punto restano visibili; il conteggio sotto la casella ti dice quante sono.
Leggi la colonna del default prima di impostare una prop; diversi default sorprendono.
Copia gli esempi sotto la tabella per una textarea, un campo email e una catena di passaggio al campo successivo.
autoCapitalize ha come default sentences, quindi impostalo a none nei campi email e username.
secureTextEntry non funziona insieme a multiline; un campo password deve restare su una sola riga.
inputMode ha la precedenza su keyboardType quando sono impostati entrambi, quindi scegline uno.
maxLength blocca la digitazione al limite, evitando lo sfarfallio di tagliare tu la stringa in onChangeText.
Android disegna un bordo inferiore di default; underlineColorAndroid="transparent" lo rimuove.
Domande frequenti
Come si crea una textarea in React Native?
Non esiste un componente textarea separato. Usa TextInput con multiline impostato a true, dagli un'altezza o numberOfLines, e aggiungi textAlignVertical: "top" così la prima riga parte dall'alto su Android come succede su iOS.
Perché il tasto Invio va a capo invece di inviare?
In un campo multiline submitBehavior ha come default "newline". Impostalo a "submit" o "blurAndSubmit" se Invio deve invece attivare onSubmitEditing. I campi a riga singola hanno come default "blurAndSubmit".
Cosa ha sostituito blurOnSubmit?
submitBehavior. La documentazione segna blurOnSubmit come deprecato, e submitBehavior lo sovrascrive quando sono presenti entrambi.
Quali valori di keyboardType funzionano su entrambe le piattaforme?
default, number-pad, decimal-pad, numeric, email-address, phone-pad e url. Altri, come twitter e web-search su iOS o visible-password su Android, valgono solo su una piattaforma.
Controllato o non controllato
La maggior parte delle schermate passa value e onChangeText, così lo state contiene sempre quello che c'è a schermo e puoi validarlo o riformattarlo. defaultValue fornisce una stringa iniziale senza tracciare ogni tasto premuto, ed è adatto a un campo che leggi una sola volta, all'invio.
Usa un ref quando devi spostare il focus. Chiamare focus() sul ref del campo successivo dentro onSubmitEditing ti dà il comportamento familiare di premere Invio per scendere lungo un form.
Tastiere e compilazione automatica
keyboardType cambia i tasti che una persona vede; non valida mai ciò che scrive. Un campo decimal-pad può comunque ricevere lettere incollate, quindi controlla la stringa prima di salvarla.
autoComplete è il suggerimento multipiattaforma per la compilazione automatica del sistema, e textContentType è quello solo per iOS. Impostarli entrambi sui campi di login permette di compilare password salvate e codici monouso ricevuti via messaggio su entrambe le piattaforme.
Esempi di TextInput
Una textarea multiline
textAlignVertical mantiene il cursore in alto su Android, e il conteggio dei caratteri si legge direttamente dallo state.
Campo email che sposta il focus al campo successivo
returnKeyType="next" dà l'etichetta al tasto, e onSubmitEditing mette il focus sul campo password tramite il suo ref.
Props di TextInput, valori e default
Prop
Valori o tipo
Default
Piattaforma
Cosa fa
value / onChangeText
string / (text) => void
Entrambe
Testo controllato e callback che riceve ogni nuova stringa
defaultValue
Entrambe
Testo iniziale quando non controlli il valore
Entrambe
Suggerimento mostrato mentre il campo è vuoto
placeholderTextColor
Entrambe
Colore del testo del placeholder
Entrambe
Consente più righe; la textarea di React Native
numberOfLines
Entrambe
Numero massimo di righe mostrate; su iOS solo con la New Architecture