0
408
ViewsReact Native: el teclado cubre la parte inferior de la entrada
En mi aplicación, el teclado cubre solo la parte inferior de la entrada de texto. He intentado varias formas de resolver esto cambiando estilos agregando relleno o margen, y KeyboardAvoidingView tampoco ayudó.
Otro problema es que el teclado cambia toda la pantalla y el encabezado se vuelve invisible a medida que avanza.
Editar: funciona bien en dispositivos IOS.
¿Cómo puedo solucionar estos problemas? Gracias
Código:
<> <CustomHeader title={item.title} leftChild={<SvgImageComp name={MENU_ICON}/>} centerChild={ <TextComp text={'Title'} style={compStyle.title}/> } /> <View style={{ flex: 1, justifyContent: 'flex-end' }}> <KeyboardAvoidingView behavior={"height"} > <TextInputComp fontFamily={NUNITO_SANS_REGULAR} fontSize={15} lineHeight={20} autoFocus={true} style={{ paddingVertical: 10, paddingHorizontal: 20, borderWidth: 1, borderColor: '#000', borderRadius: 200, }} /> </KeyboardAvoidingView> </View> </> 
2 answers
Answer question0
Para Android, no necesita pasar el comportamiento a KeyboardAvoidingView. Para IOS, debe pasar comportamiento="posición" y tecladoVerticalOffset=[altura de su entrada].
<KeyboardAvoidingView {...(Platform.OS === 'ios' ? { behavior: 'position' , keyboardVerticalOffset: [inputHeight], // calculate height using onLayout callback method } : {})}> 
0
Evito este problema envolviendo la pantalla en <ScrollView contentContainerStyle={flexGrow: 1}><ScrollView> Esto hará que toda la pantalla se convierta en una vista de desplazamiento una vez que se abra el teclado. Permitiendo que la caja esté fuera del camino del teclado. Esto también tiene el beneficio adicional de permitirle desplazarse a otras secciones de la pantalla como referencia mientras el teclado permanece abierto.