Wie formatieren Sie einen TextInput in React Native für die Passworteingabe?

97

Ich habe einen TextInput, den ich ... enthalten möchte, wenn der Benutzer Text eingibt, anstatt den tatsächlich eingegebenen Text anzuzeigen. Was ist der beste Weg, dies zu tun?

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

Antworten:

301

Als dies gefragt wurde, gab es keine Möglichkeit, dies nativ zu tun. Dies wird jedoch bei der nächsten Synchronisierung gemäß dieser Pull-Anforderung hinzugefügt . Hier ist der letzte Kommentar zur Pull-Anfrage: "Intern gelandet, wird bei der nächsten Synchronisierung veröffentlicht."

Wenn es hinzugefügt wird, können Sie so etwas tun

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

refs

Riley Bracken
quelle
danke, also bis das zusammengeführt wird, welche anderen Optionen gibt es? Ich vermute, Facebook macht etwas Ähnliches für die Anmeldung an ihren eigenen Apps.
Bwbrowning
1
Ich habe mich heute damit befasst, so habe ich diese Pull-Anfrage gefunden. Sie sagen, dass sie nur 2 Apps haben, die 100% React Native sind. Die F8-App öffnet ein neues Fenster, in dem Sie um Autorisierung gebeten werden. Facebook Ads hat die Funktionalität, die wir suchen, aber ich denke fast, dass sie Objective-C dafür verpackt haben. Eine andere Möglichkeit wäre, die Zeichenfolge zu speichern und jedes Mal, wenn die Eingabe aktualisiert wird, das letzte Zeichen durch das ... Zeug zu ersetzen :).
Riley Bracken
@bwbrowning, es sollte bald zusammengeführt werden; lange bevor Sie bereitstellen, würde ich wetten.
Brigand
Ich mag das, weil es Text hat, so dass ich kopieren und einfügen kann. XD
Jovylle Bermudez
24

Mai 2018 reaktionsnative Version 0.55.2

SecureTextEntry = {true} funktioniert

password = {true} funktioniert nicht

Mediaguru
quelle
8

Fügen Sie einfach die folgende Zeile hinzu <TextInput>

secureTextEntry={true}
Hashini
quelle
6

Ich musste hinzufügen:

secureTextEntry={true}

Zusammen mit 

password={true}

Ab 0,55

NicholasByDesign
quelle
Sie brauchen kein Passwort = {true}
KetZoomer
6

Hinzufügen 

secureTextEntry={true}

oder nur

secureTextEntry

Eigenschaft in Ihrem TextInput.

Arbeitsbeispiel:

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

Ein TextInput muss SecureTextEntry = {true} enthalten. Beachten Sie, dass in den Dokumenten von React angegeben ist, dass Sie nicht gleichzeitig multiline = {true} verwenden dürfen, da diese Kombination nicht unterstützt wird.

Sie können auch textContentType = {'password'} festlegen, damit das Feld Anmeldeinformationen aus dem auf Ihrem Mobiltelefon gespeicherten Schlüsselbund abrufen kann. Dies ist eine alternative Möglichkeit, Anmeldeinformationen einzugeben, wenn Sie auf Ihrem Mobiltelefon biometrische Eingaben zum schnellen Einfügen von Anmeldeinformationen erhalten haben. Wie FaceId auf dem iPhone X oder Fingerabdruck-Touch-Eingabe auf anderen iPhone-Modellen und 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
quelle
3

Ein kleines Plus:

version = RN 0.57.7

secureTextEntry={true}

funktioniert nicht wenn das keyboardTypewar "phone-pad"oder"email-address"

qloveshmily
quelle
2

Sie können den Beispiel- und Beispielcode auf der offiziellen Website wie folgt abrufen:

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

Referenz: http://facebook.github.io/react-native/docs/textinput.html

Richard Li
quelle
2
Ja, das habe ich auch gesehen. Aber für mich funktioniert es nur mit secureTextEntry={true} .
Namxam
Aktualisieren Sie einfach auf den neuesten Stall (0.8.0) und es password={true}wird funktionieren.
Daniel Pecher
0

Ich verwende 0.56RC secureTextEntry = {true}. Zusammen mit password = {true} funktioniert es dann nur wie von @NicholasByDesign erwähnt

Ramusesan
quelle