reactjs - keyboardavoidingview - keyboardawarescrollview react
KeyboardAvoidingView con ScrollView (5)
Soy algo nuevo para reaccionar nativo y tengo una pregunta que no encontré en reaccionar documentación nativa
Estoy buscando en este componente KeyboardAvoidingView
: https://facebook.github.io/react-native/docs/keyboardavoidingview.html
La pregunta es simple: ¿tiene alguien que haga que KeyboardAvoidingView
funcione bien con ScrollView
? Tengo muchos TextInputs
en un componente (la suma de TextInputs height es mayor que la del dispositivo), y una vez que aparece el teclado, tengo varios problemas ...
Si uso View
lugar de ScrollView
entonces todo está bien, pero no puedo usarlo, ya que necesito más espacio que la altura del dispositivo. No pude encontrar nada sobre Scroll en la documentación de KeyboardAvoidingView
.
Gracias.
En mi caso utilicé: https://github.com/APSL/react-native-keyboard-aware-scroll-view .
<KeyboardAwareScrollView>
....
<MyContainerComponent>
....
<MyFormComponentWithInputs />
</MyContainerComponent>
</KeyboardAwareScrollView>
Es compatible con versiones anteriores de RN también.
Mi entrada de texto estaba en algún lugar oculto. Hay algunos componentes secundarios personalizados de ScrollView, pero el paquete funcionó muy bien tanto para Android como para iOS.
Me encontré con el mismo problema, aunque tenía un enfoque diferente que básicamente calculará y posicionará (usando la traducción) la vista cuando aparezca el teclado.
He publicado la solución en github y NPM react-native-spacer .
Para aquellos, esto es lo que mi solución funcionaría y se desplaza automáticamente en la entrada de enfoque. Probé esto en la exposición Espero que esto ayude.
<KeyboardAvoidingView style={{ flex: 1, flexDirection: ''column'',justifyContent: ''center'',}} behavior="padding" enabled keyboardVerticalOffset={100}>
<ScrollView>
<View style={Styles.row}>
//your view
</View>
</ScrollView>
</KeyboardAvoidingView>
Parece que Facebook aún no ha implementado una solución para scrollViews. Pero he encontrado una solución hecha por Wix que funciona como debería :)
También intenté encontrar la solución en Internet, pero la descubrí yo mismo. Pude hacer keyboardAvoidingView
para trabajar con ScrollView
en el simulador de iPhone SE.
Utilicé la position
tipo de relleno, con keyboardVerticalOffset
establecido en un valor superior. Espero que esto ayude a todos los que están atrapados en esta situación.
render() {
return (
<View style={…..}>
<ScrollView>
<KeyboardAvoidingView style={{ flex: 1 }}
keyboardVerticalOffset={100} behavior={"position"}>
<TextInput style={styles.editInput} …./>
</KeyboardAvoidingView>
</ScrollView>
</View>
)}