TextInput React Native : référence des props avec recherche | We.Inc
Toutes les props TextInput dont vous avez besoin, dans un tableau filtrable : textarea multiline, keyboardType, secureTextEntry, autoComplete, returnKeyType, submitBehavior et plus encore.
TextInput est le composant de base de React Native pour la saisie de texte. Gardez sa valeur dans le state et mettez-la à jour depuis onChangeText, qui vous transmet la nouvelle chaîne. Pour un textarea, mettez multiline à true et ajoutez textAlignVertical: "top" pour qu'Android se comporte comme iOS. keyboardType, autoComplete et secureTextEntry choisissent le clavier, l'indication de saisie automatique et le masquage du mot de passe.
La référence officielle est une longue liste alphabétique. Cette page garde celles que l'on recherche vraiment, avec leurs valeurs et leurs défauts réels, dans un tableau filtrable par nom, valeur ou plateforme. Tapez multiline, password ou android dans le champ pour affiner.
Tapez un mot dans le champ de filtre : un nom de prop, une valeur comme decimal-pad, ou une plateforme.
Les lignes qui correspondent à un endroit quelconque restent visibles ; le compteur sous le champ indique combien.
Lisez la colonne des valeurs par défaut avant de définir une prop ; plusieurs défauts surprennent.
Copiez les exemples sous le tableau pour un textarea, un champ e-mail et un enchaînement vers le champ suivant.
autoCapitalize vaut sentences par défaut, mettez-le donc à none sur les champs e-mail et nom d'utilisateur.
secureTextEntry ne fonctionne pas avec multiline ; un champ mot de passe doit rester sur une seule ligne.
inputMode a priorité sur keyboardType quand les deux sont définis, choisissez-en donc un seul.
maxLength arrête la saisie à la limite, ce qui évite le scintillement d'une chaîne que vous tronquez vous-même dans onChangeText.
Android dessine une bordure inférieure par défaut ; underlineColorAndroid="transparent" la supprime.
Questions fréquentes
Comment créer un textarea en React Native ?
Il n'existe pas de composant textarea séparé. Utilisez TextInput avec multiline à true, donnez-lui une hauteur ou numberOfLines, et ajoutez textAlignVertical: "top" pour que la première ligne commence en haut sur Android comme sur iOS.
Pourquoi la touche Entrée ajoute-t-elle une ligne au lieu de valider ?
Sur un champ multiline, submitBehavior vaut "newline" par défaut. Mettez-le à "submit" ou "blurAndSubmit" si Entrée doit plutôt déclencher onSubmitEditing. Les champs sur une seule ligne valent "blurAndSubmit" par défaut.
Qu'est-ce qui a remplacé blurOnSubmit ?
submitBehavior. La documentation marque blurOnSubmit comme obsolète, et submitBehavior l'emporte quand les deux sont présents.
Quelles valeurs de keyboardType fonctionnent sur les deux plateformes ?
default, number-pad, decimal-pad, numeric, email-address, phone-pad et url. Les autres, comme twitter et web-search sur iOS ou visible-password sur Android, ne s'appliquent qu'à une seule plateforme.
Contrôlé ou non contrôlé
La plupart des écrans passent value et onChangeText, de sorte que le state contient toujours ce qui est affiché et que vous pouvez le valider ou le reformater. defaultValue fournit une chaîne initiale sans suivre chaque frappe, ce qui convient à un champ que vous ne lisez qu'une fois, à l'envoi.
Utilisez une ref quand vous devez déplacer le focus. Appeler focus() sur la ref du champ suivant dans onSubmitEditing donne le comportement familier où l'on appuie sur Entrée pour descendre dans un formulaire.
Claviers et saisie automatique
keyboardType change les touches affichées ; il ne valide jamais ce qui est tapé. Un champ decimal-pad peut quand même recevoir des lettres collées, vérifiez donc la chaîne avant de l'enregistrer.
autoComplete est l'indication multiplateforme pour la saisie automatique du système, et textContentType celle réservée à iOS. Définir les deux sur les champs de connexion permet de remplir les mots de passe enregistrés et les codes à usage unique reçus par message sur les deux plateformes.
Exemples de TextInput
Un textarea multiline
textAlignVertical garde le curseur en haut sur Android, et le nombre de caractères est lu directement depuis le state.
Champ e-mail qui déplace le focus vers le champ suivant
returnKeyType="next" définit le libellé de la touche, et onSubmitEditing donne le focus au champ mot de passe via sa ref.
Props TextInput, valeurs et défauts
Prop
Valeurs ou type
Défaut
Plateforme
Rôle
value / onChangeText
string / (text) => void
Les deux
Texte contrôlé et callback qui reçoit chaque nouvelle chaîne
defaultValue
Les deux
Texte initial quand vous ne contrôlez pas la valeur
Les deux
Indication affichée tant que le champ est vide
placeholderTextColor
Les deux
Couleur du texte du placeholder
Les deux
Autorise plusieurs lignes ; le textarea de React Native
numberOfLines
Les deux
Nombre maximal de lignes affichées ; sur iOS uniquement avec la New Architecture