Estoy usando el paquete react-native-phone-input para ingresar el número de teléfono. Quiero que el campo de contraseña a continuación se abra cuando el usuario presione la tecla Intro en el teclado después de ingresar el número de teléfono. No hay tal método en el paquete. ¿Cómo puedo hacer eso? ¿Puedo simplemente escuchar la tecla Intro cuando el teclado está encendido y hacer que ingrese la contraseña?
import { TextInput, View } from 'react-native'; import React, { useState } from 'react'; import PhoneInput from 'react-native-phone-input'; export default function SignUp({ navigation }) { const [password, setPassword] = useState(''); const [phoneNumber, setPhoneNumber] = useState(''); return ( <View > <PhoneInput ref={ref => { phone = ref }} onChangePhoneNumber={setPhoneNumber} style={{ width: 150, height: 30, backgroundColor: 'grey' }} /> <TextInput onChangeText={setPassword} value={password} style={{ width: 150, height: 30, backgroundColor: 'grey', marginTop: 20 }} /> </View > ); }Hay un prop en react-native-phone-input que debería permitirle manejar esto como lo haría con un TextInput normal.
onPressConfirmar
función ninguna
Se llamará al controlador cuando toque el botón de confirmación.
Por lo tanto, puede definir un estado y usar la función onPressConfirm para cambiar este estado. Luego use la representación condicional para ocultar o mostrar la entrada de password .
import { TextInput, View } from 'react-native'; import React, { useState } from 'react'; import PhoneInput from 'react-native-phone-input'; export default function SignUp({ navigation }) { const [password, setPassword] = useState(''); const [phoneNumber, setPhoneNumber] = useState(''); const [confirm, setConfirm] = useState(false) return ( <View > <PhoneInput ref={ref => { phone = ref }} onChangePhoneNumber={setPhoneNumber} style={{ width: 150, height: 30, backgroundColor: 'grey' }} onPressConfirm={() => setConfirm(true)} /> { confirm && <TextInput onChangeText={setPassword} value={password} style={{ width: 150, height: 30, backgroundColor: 'grey', marginTop: 20 }} />} </View > ); }