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

103

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

react-native

— bwbrowning
source

321

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

— Riley Bracken
source

merci, donc jusqu'à ce que cela soit fusionné, quelles sont les autres options? Je suppose que Facebook fait quelque chose de similaire pour les connexions à leurs propres applications.

— bwbrowning

1

J'examinais cela aujourd'hui, c'est ainsi que j'ai trouvé cette pull request. Ils disent qu'ils n'ont que 2 applications qui sont 100% React Native. L'application F8 ouvre une nouvelle fenêtre demandant l'autorisation. Les publicités Facebook ont la fonctionnalité que nous recherchons, mais je pense presque qu'elles ont emballé Objective-C pour cela. Une autre façon de le faire serait de stocker la chaîne et à chaque fois que les mises à jour d'entrée remplacent le dernier caractère par le ... truc :).

— Riley Bracken

@bwbrowning, il devrait bientôt être fusionné; bien avant de vous déployer je parierais.

— Brigand

J'aime cela car il contient du texte pour que je puisse copier-coller à partir de celui-ci. XD

— Jovylle Bermudez

25

Mai 2018 version 0.55.2 native de réaction

secureTextEntry = {true} fonctionne

password = {true} ne fonctionne pas

— mediaguru
source

11

Ajoutez simplement la ligne ci-dessous au <TextInput>

secureTextEntry={true}

— Hashini
source

6

J'ai dû ajouter:

secureTextEntry={true}

De même que

password={true}

À partir de 0,55

— NicholasByDesign
source

2

vous n'avez pas besoin de mot de passe = {true}

— KetZoomer

6

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

— user274294
source

4

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

— Tore Aurstad
source

3

Un petit plus:

version = RN 0.57.7

secureTextEntry={true}

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

— qloveshmily
source

2

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

— Richard Li
source

2

Oui, j'ai vu cela aussi. Mais pour moi, cela ne fonctionne qu'avec secureTextEntry={true} .

— namxam

Mettez simplement à niveau vers la dernière version stable (0.8.0) et password={true}fonctionnera.

— Daniel Pecher du

0

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

— Ramusesan
source