reactjs - keyboardavoidingview - reactnative input

¿Cómo diseñar un TextInput en reaccionar nativo para la entrada de contraseña?

Question

Tengo una entrada de texto que quiero contener ... cuando el usuario ingresa texto en lugar de mostrar el texto ingresado. ¿Cuál es la mejor manera de hacer esto?

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

Answer 1

Añadir

secureTextEntry={true}

o solo

secureTextEntry

propiedad en su TextInput.

Ejemplo de trabajo

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

Answer 2

Cuando se le preguntó esto, no había una forma de hacerlo de forma nativa, sin embargo, esto se agregará en la próxima sincronización de acuerdo con this solicitud de extracción. Aquí está el último comentario sobre la solicitud de extracción: "Aterrizado internamente, saldrá en la próxima sincronización"

Cuando se agregue, podrá hacer algo como esto

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

refs

Answer 3

Estoy usando 0.56RC secureTextEntry = {true} Junto con contraseña = {true}, entonces solo funciona como lo menciona @NicholasByDesign

Answer 4

Puede obtener el ejemplo y el código de muestra en el sitio oficial de la siguiente manera:

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

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

Answer 5

Simplemente agregue la línea de abajo a <TextInput>

secureTextEntry={true}

Answer 6

Tuve que agregar:

secureTextEntry={true}

Junto con

password={true}

A partir de 0.55

Answer 7

Un TextInput debe incluir secureTextEntry = {true}, tenga en cuenta que los documentos de React indican que no debe usar multilínea = {true} al mismo tiempo, ya que esa combinación no es compatible.

También puede configurar textContentType = {''contraseña''} para permitir que el campo recupere las credenciales del llavero almacenado en su dispositivo móvil, una forma alternativa de ingresar las credenciales si tiene entrada biométrica en su dispositivo móvil para insertar rápidamente las credenciales. Como FaceId en iPhone X o entrada táctil de huellas digitales en otros modelos de iPhone y 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'' />

Answer 8

Un pequeño plus:

version = RN 0.57.7
secureTextEntry={true}

no funciona cuando el tipo de keyboardType era "phone-pad" o "email-address"

Answer 9

Mayo de 2018 react-native versión 0.55.2

secureTextEntry = {true} funciona

contraseña = {verdadero} no funciona