Hay una manera de capturar pestañas en a TextInput
. Es hacky, pero mejor que nada .
Defina un onChangeText
controlador que compare el nuevo valor de entrada con el antiguo, buscando un \t
. Si encuentra uno, avance el campo como se muestra en @boredgames
Suponiendo que la variable username
contiene el valor para el nombre de usuario y setUsername
envía una acción para cambiarlo en la tienda (estado del componente, tienda redux, etc.), haga algo como esto:
function tabGuard (newValue, oldValue, callback, nextCallback) {
if (newValue.indexOf('\t') >= 0 && oldValue.indexOf('\t') === -1) {
callback(oldValue)
nextCallback()
} else {
callback(newValue)
}
}
class LoginScene {
focusNextField = (nextField) => {
this.refs[nextField].focus()
}
focusOnPassword = () => {
this.focusNextField('password')
}
handleUsernameChange = (newValue) => {
const { username } = this.props // or from wherever
const { setUsername } = this.props.actions // or from wherever
tabGuard(newValue, username, setUsername, this.focusOnPassword)
}
render () {
const { username } = this.props
return (
<TextInput ref='username'
placeholder='Username'
autoCapitalize='none'
autoCorrect={false}
autoFocus
keyboardType='email-address'
onChangeText={handleUsernameChange}
blurOnSubmit={false}
onSubmitEditing={focusOnPassword}
value={username} />
)
}
}
v16.8.0
o superior, recomendaría la respuesta proporcionada por @Eli Johnson en la parte inferior. React ha desaprobado muchos usos de losref
proporcionados en las siguientes soluciones.