Comment stylisez-vous un TextInput dans React Native pour la saisie de mot de passe

J'ai un TextInput. Au lieu d'afficher le texte réel saisi, je souhaite qu'il affiche des astérisques (****) lorsque l'utilisateur entre du texte. Comment puis-je faire ceci?

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

Lorsque cela a été demandé, il n'y avait pas de moyen de le faire de manière native, mais cela sera ajouté lors de la prochaine synchronisation en fonction de cette pull request. Voici le dernier commentaire sur la demande d'extraction - "Atteint en interne, sera sorti lors de la prochaine synchronisation"

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

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

réfs

Mai 2018 version 0.55.2 native de réaction

secureTextEntry = {true} fonctionne

password = {true} ne fonctionne pas

Ajoutez simplement la ligne ci-dessous au <TextInput>

secureTextEntry={true}

J'ai dû ajouter:

secureTextEntry={true}

De même que

password={true}

À partir de 0,55

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}
/>

Un TextInput doit inclure secureTextEntry = {true}, notez que la documentation de React indique 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 avez une entrée biométrique sur votre mobile pour insérer rapidement des informations d'identification. Tels que FaceId sur l'iPhone X ou l'entrée tactile par 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' />

Un petit plus:

version = RN 0.57.7

secureTextEntry={true}

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

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

J'utilise 0.56RC secureTextEntry = {true} avec password = {true} alors seulement son fonctionnement comme mentionné par @NicholasByDesign