reactjs - keyboardavoidingview - keyboardawarescrollview react

KeyboardAvoidingView con ScrollView

Question

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.

Answer 1

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.

Answer 2

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 .

Answer 3

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>

Answer 4

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 :)

Answer 5

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>
)}