¿Cómo se diseña un TextInput en react native para la entrada de contraseña?

103

Tengo un TextInput. En lugar de mostrar el texto real ingresado, quiero que muestre asteriscos (****) cuando el usuario ingrese texto. ¿Cómo puedo hacer esto?

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

react-native

— bwbrowning
fuente

321

Cuando se preguntó esto, no había una manera de hacerlo de forma nativa, sin embargo, esto se agregará en la próxima sincronización de acuerdo con esta 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

— Riley Bracken
fuente

gracias, así que hasta que se fusione, ¿qué otras opciones hay? Supongo que Facebook hace algo similar para los inicios de sesión en sus propias aplicaciones.

— bwbrowning

1

Lo estaba investigando hoy, así es como encontré esa solicitud de extracción. Dicen que solo tienen 2 aplicaciones que son 100% React Native. La aplicación F8 abre una nueva ventana solicitando autorización. Los anuncios de Facebook tienen la funcionalidad que estamos buscando, pero casi creo que incluyeron Objective-C. Otra forma de hacerlo sería almacenar la cadena y cada vez que las actualizaciones de entrada reemplacen el último carácter con ... cosas :).

— Riley Bracken

@bwbrowning, debería fusionarse pronto; mucho antes de que se despliegue, apuesto.

— Brigand

Me gusta esto porque tiene texto para que pueda copiar y pegar desde él. XD

— Jovylle Bermudez

25

Mayo de 2018 react-native versión 0.55.2

secureTextEntry = {true} funciona

contraseña = {true} no funciona

— mediaguru
fuente

11

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

secureTextEntry={true}

— Hashini
fuente

6

Tuve que agregar:

secureTextEntry={true}

Junto con

password={true}

Desde 0,55

— NicholasByDesign
fuente

2

no necesita contraseña = {true}

— KetZoomer

6

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

— usuario274294
fuente

4

Un TextInput debe incluir secureTextEntry = {true}, tenga en cuenta que los documentos de React establecen que no debe usar multiline = {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 móvil, una forma alternativa de ingresar las credenciales si tiene una entrada biométrica en su móvil para insertar credenciales rápidamente. Como FaceId en iPhone X o entrada táctil de huellas dactilares 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' />

— Tore Aurstad
fuente

3

Un pequeño plus:

version = RN 0.57.7

secureTextEntry={true}

no funciona cuando keyboardTypeera "phone-pad"o"email-address"

— qloveshmily
fuente

2

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

— Richard Li
fuente

2

Sí, también vi esto. Pero para mí solo funciona con secureTextEntry={true} .

— namxam

Simplemente actualice a la última versión estable (0.8.0) y password={true}funcionará.

— Daniel Pecher

0

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

— Ramusesan
fuente