Cómo enfocar automáticamente el siguiente TextInput en react-native

Posterior a de una extensa recopilación de información pudimos resolver esta interrogante que presentan ciertos de nuestros lectores. Te ofrecemos la respuesta y deseamos que te sea de gran apoyo.

Solución:

Hay un Prop predeterminado para TextInput donde uno puede enfocarse después de montar el componente.

enfoque automático

Si trueenfoca la entrada en componentDidMount, el valor predeterminado es false. para obtener más información, lea los documentos relacionados.

ACTUALIZAR

Después componentDidUpdate no funcionará correctamente. En ese caso, uno puede usar ref para enfocarse programáticamente.

No puede reenviar el ref a usando de esa manera porque ref es uno de los apoyos especiales. Así, llamando this.refs.passcode2 te devolveré en lugar de.

Intente cambiar a lo siguiente para obtener el ref desde .

PasscodeTextInput.js

const PasscodeTextInput = ( inputRef, ... ) => 

  ...

  return (
    
        inputRef && inputRef(r) 
        ...
      />
    
    ...
  );

Luego, asigne el inputRef desde a una variable y uso focus() para cambiar el enfoque (no está en desuso a partir de RN 0.41.2).

index.ios.js

return (
    event && this.passcode2.focus()  />

    this.passcode2 = r 
    onChangeText=(event) =>  event && this.passcode3.focus()  />

    this.passcode3 = r 
    onChangeText=(event) =>  event && this.passcode4.focus()  />

    this.passcode4 = r  />
);

PD: event && this.passcode2.focus() evita que se cambie el enfoque cuando se intenta borrar la contraseña anterior e ingresar una nueva.

manejamos este estilo de pantalla con un enfoque diferente.

En lugar de administrar 4 entradas de texto individuales y manejar la navegación del enfoque en cada una (y luego regresar cuando el usuario elimina un carácter), tenemos una sola entrada de texto en la pantalla pero es invisible (es decir, 0px x 0px) de ancho que tiene el foco , maxLength y configuración del teclado, etc.

Este TextInput recibe información del usuario, pero en realidad no se puede ver, a medida que se escribe cada carácter, representamos el texto ingresado como una serie de elementos simples de Vista/Texto, con un estilo muy similar a la pantalla de arriba.

Este enfoque funcionó bien para nosotros sin necesidad de administrar en qué se enfocará el TextInput ‘siguiente’ o ‘anterior’.

---

---

Utiliza Nuestro Buscador