Hoe style je een TextInput in react native voor wachtwoordinvoer

Ik heb een TextInput. In plaats van de daadwerkelijk ingevoerde tekst weer te geven, wil ik dat wanneer de gebruiker tekst invoert, de wachtwoordpunten / sterretjes (****) worden weergegeven die je normaal gesproken in apps ziet wanneer je een wachtwoord typt. Hoe kan ik dit doen?

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

Antwoord 1, autoriteit 100%

Toen dit werd gevraagd, was er geen manier om dit native te doen, maar dit zal worden toegevoegd bij de volgende synchronisatie volgens ditpull-verzoek.
Hier is de laatste opmerking over het pull-verzoek – “Intern geland, zal verschijnen bij de volgende synchronisatie”

Als het is toegevoegd, kun je zoiets als dit doen

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

refs

Antwoord 2, autoriteit 8%

Mei 2018
react-native versie 0.55.2

Dit werkt prima:

secureTextEntry={true}

En dit werkt niet meer:

password={true} 

Antwoord 3, autoriteit 5%

Voeg gewoon de onderstaande regel toe aan de <TextInput>

secureTextEntry={true}

Antwoord 4, autoriteit 3%

Toevoegen

secureTextEntry={true}

of gewoon

secureTextEntry 

eigenschap in uw TextInput.

Werkvoorbeeld:

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

Antwoord 5, autoriteit 2%

Ik moest toevoegen:

secureTextEntry={true}

Samen met

password={true} 

Vanaf 0,55

Antwoord 6

Een TextInput moet secureTextEntry={true} bevatten, merk op dat in de documenten van React staat dat je multiline={true} niet tegelijkertijd mag gebruiken, omdat die combinatie niet wordt ondersteund.

Je kunt textContentType={‘password’} ook zo instellen dat het veld inloggegevens kan ophalen uit de sleutelhanger die op je mobiel is opgeslagen, een alternatieve manier om inloggegevens in te voeren als je biometrische invoer op je mobiel hebt om snel inloggegevens in te voeren. Zoals FaceId op iPhone X of vingerafdrukaanraakinvoer op andere iPhone-modellen en 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' />

Antwoord 7

Een klein pluspunt:

version = RN 0.57.7
secureTextEntry={true}

werkt niet als het keyboardType"phone-pad"of "email-address"

was

Antwoord 8

Je kunt het voorbeeld en de voorbeeldcode als volgt op de officiële site krijgen:

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

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

Antwoord 9

<TextInput
  placeholderTextColor={colors.Greydark}
  placeholder={'Enter Password'}
  secureTextEntry={true} />

Antwoord 10

Als je secureTextEntry={true}hebt toegevoegd maar niet werkte, controleer dan de multiline={true}prop, want als het waar is, secureTextEntrywerkt niet.

Antwoord 11

<TextInput 
   secureTextEntry 
   placeholder="password" placeholderTextColor="#297542" 
   autoCorrect={false} style={mystyles.inputStylee} 
/>

Je kunt gewoon de prop secureTextEntrytoevoegen aan TextInput en de waarde ervan weglaten. Standaard is deze ingesteld op waar. Om het onwaar te maken, doet u dit secureTextEntry={false}

Antwoord 12

<TextInput
        placeholder="Password"
        secureTextEntry={true}
        style={styles.input}
        onChangeText={setPassword}
        value={password}
      />