web-dev-qa-db-fra.com

Comment dressez-vous un TextInput en natif pour la saisie du mot de passe

J'ai un objet TextInput que je veux contenir ... lorsque l'utilisateur entre du texte au lieu d'afficher le texte saisi. Quel est le meilleur moyen de le faire?

<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
onChangeText={(text) => this.setState({input: text})}
      />
reactjsreact-native
41
bwbrowning

Quand cela a été demandé, il n'y avait pas moyen de le faire en mode natif, cependant cela sera ajouté à la prochaine synchronisation selon this pull request . Voici le dernier commentaire sur la requête pull - "Atterri en interne , sera sur la prochaine synchronisation "

Quand il sera ajouté, vous pourrez faire quelque chose comme ça

<TextInput secureTextEntry={true} style={styles.default} value="abc" />

refs

138
Riley Bracken

Mai 2018 Version native 0.55.2

secureTextEntry = {true} fonctionne

mot de passe = {true} ne fonctionne pas

9
mediaguru

Je devais ajouter:

secureTextEntry={true}

De même que 

password={true}

À partir de 0.55

2
NicholasByDesign

Vous pouvez obtenir l'exemple et l'exemple de code sur le site officiel, comme suit:

<TextInput password={true} style={styles.default} value="abc" />

Référence: http://facebook.github.io/react-native/docs/textinput.html

2
Richard Lee

Ajouter 

secureTextEntry={true}

ou juste

secureTextEntry

propriété dans votre TextInput.

Exemple de travail:

<TextInput style={styles.input}
           placeholder="Password"
           placeholderTextColor="#9a73ef"
           returnKeyType='go'
           secureTextEntry
           autoCorrect={false}
/>
1
user274294

J'utilise 0.56RC secureTextEntry = {true} avec password = {true} Alors seulement son fonctionnement est mentionné dans @NicholasByDesign

0
Ramusesan

Un petit plus:

version = RN 0.57.7

secureTextEntry={true}

ne fonctionne pas lorsque la keyboardType était "phone-pad" ou "email-address"

0
qloveshmily

Un objet TextInput doit inclure secureTextEntry = {true}. Notez que les documents de React indiquent que vous ne devez pas utiliser multiline = {true} en même temps, car cette combinaison n'est pas prise en charge. 

Vous pouvez également définir textContentType = {'password'} pour permettre au champ de récupérer les informations d'identification du trousseau stocké sur votre mobile. Une autre façon de saisir des informations d'identification si vous disposez d'une entrée biométrique sur votre mobile pour insérer rapidement des informations d'identification. Tels que FaceId sur iPhone X ou une entrée tactile à empreinte digitale sur d'autres modèles d'iPhone et Android. 

 <TextInput value={this.state.password} textContentType={'password'} multiline={false} secureTextEntry={true} onChangeText={(text) => { this._savePassword(text); this.setState({ password: text }); }} style={styles.input} placeholder='Github password' />
0
Tore Aurstad