Come si definisce un TextInput in React Native per l'immissione della password

103

Ho un TextInput. Invece di mostrare il testo effettivo inserito, voglio che mostri asterischi (****) quando l'utente inserisce il testo. Come posso fare questo?

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

react-native

— bwbrowning
fonte

321

Quando è stato chiesto non c'era un modo per farlo in modo nativo, tuttavia questo verrà aggiunto alla sincronizzazione successiva in base a questa richiesta di pull. Ecco l'ultimo commento sulla richiesta pull: "Atterrato internamente, uscirà alla prossima sincronizzazione"

Quando viene aggiunto sarai in grado di fare qualcosa di simile

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

rif

— Riley Bracken
fonte

grazie, quindi fino a quando non viene unito, quali altre opzioni ci sono? Immagino che Facebook faccia qualcosa di simile per gli accessi alle proprie app.

— bwbrowning

1

Lo stavo esaminando oggi, è così che ho trovato quella richiesta di pull. Dicono di avere solo 2 app che sono React Native al 100%. L'app F8 apre una nuova finestra chiedendo l'autorizzazione. Facebook Ads ha le funzionalità che stiamo cercando, ma penso quasi che abbiano inserito Objective-C per questo. Un altro modo per farlo sarebbe memorizzare la stringa e ogni volta che l'input si aggiorna sostituire l'ultimo carattere con il ... roba :).

— Riley Bracken

@bwbrowning, dovrebbe essere unito presto; molto prima che ti schieri scommetterei.

— Brigante

Mi piace perché ha del testo quindi posso copiare e incollare da esso. XD

— Jovylle Bermudez

25

Maggio 2018 React-Native versione 0.55.2

secureTextEntry = {true} funziona

password = {true} non funziona

— mediaguru
fonte

11

Basta aggiungere la riga sottostante al file <TextInput>

secureTextEntry={true}

— Hashini
fonte

6

Ho dovuto aggiungere:

secureTextEntry={true}

Insieme a

password={true}

A partire da 0,55

— NicholasByDesign
fonte

2

non è necessaria la password = {true}

— KetZoomer

6

Inserisci

secureTextEntry={true}

o semplicemente

secureTextEntry

proprietà nel tuo TextInput.

Esempio di lavoro:

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

— user274294
fonte

4

Un TextInput deve includere secureTextEntry = {true}, nota che la documentazione di React afferma che non devi usare multiline = {true} allo stesso tempo, poiché quella combinazione non è supportata.

Puoi anche impostare textContentType = {'password'} per consentire al campo di recuperare le credenziali dal portachiavi memorizzato sul tuo cellulare, un modo alternativo per inserire le credenziali se hai un input biometrico sul tuo cellulare per inserire rapidamente le credenziali. Come FaceId su iPhone X o input tattile con impronte digitali su altri modelli di iPhone e 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
fonte

3

Un piccolo vantaggio:

version = RN 0.57.7

secureTextEntry={true}

non funziona quando keyboardTypeera "phone-pad"o"email-address"

— qloveshmily
fonte

2

Puoi ottenere l'esempio e il codice di esempio sul sito ufficiale, come segue:

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

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

— Richard Li
fonte

2

Sì, ho visto anche questo. Ma per me funziona solo con secureTextEntry={true} .

— namxam

Basta aggiornare all'ultima versione stabile (0.8.0) e password={true}funzionerà.

— Daniel Pecher

0

Sto usando 0.56RC secureTextEntry = {true} Insieme a password = {true} quindi funziona solo come menzionato da @NicholasByDesign

— Ramusesan
fonte