web-dev-qa-db-fra.com

KeyboardAvoidingView avec ScrollView

Je suis un peu nouveau pour réagir natif et ai une question que je n'ai pas trouvée dans réagissent documentation native.

Je regarde dans ce composant KeyboardAvoidingView: https://facebook.github.io/react-native/docs/keyboardavoidingview.html

La question est simple - quelqu'un a-t-il quelqu'un pour que KeyboardAvoidingView fonctionne bien avec ScrollView? J'ai plusieurs TextInputs dans un composant (la somme de la hauteur TextInputs est plus grande que la hauteur du périphérique), et une fois le clavier affiché, divers problèmes se posent.
Si j'utilise View au lieu de ScrollView alors tout va bien, mais je ne peux pas l'utiliser, car j'ai besoin de plus d'espace que la hauteur de l'appareil ... Je ne pouvais pas trouver rien sur Scroll dans la documentation KeyboardAvoidingView.

Merci.

reactjsreact-native
17
user1341104

Il semblerait que Facebook n'ait pas encore implémenté de solution pour scrollViews. Mais j'ai trouvé une solution faite par Wix ça marche comme il se doit :)

10
user1341104

J'ai aussi essayé de trouver la solution sur Internet, mais je l'ai trouvée moi-même. J'ai été capable de faire keyboardAvoidingView pour travailler avec ScrollView sur le simulateur iPhone SE. 

J'ai utilisé le type de remplissage position, avec keyboardVerticalOffset défini sur une valeur plus élevée. J'espère que cela aide tous ceux qui sont pris au piège dans cette situation.

 render() {
    return (
    <View style={…..}>
        <ScrollView>
                <KeyboardAvoidingView style={{ flex: 1 }}
                keyboardVerticalOffset={100} behavior={"position"}>
                <TextInput style={styles.editInput} …./>

            </KeyboardAvoidingView>
        </ScrollView>
    </View>
)}
5
Waseem05

Dans mon cas, j'ai utilisé: https://github.com/APSL/react-native-keyboard-aware-scroll-view.

<KeyboardAwareScrollView>
  ....
  <MyContainerComponent>
    ....
    <MyFormComponentWithInputs />
  </MyContainerComponent>
</KeyboardAwareScrollView>

Il prend également en charge les anciennes versions de RN.

Mon entrée de texte était quelque part cachée profondément est un composant enfant personnalisé de ScrollView, mais le package a très bien fonctionné pour Android et iOS

3
Florin Dobre

Pour ceux-ci, c’est ce que ma solution serait que cela fonctionne et défile automatiquement sur la saisie de la mise au point. J'ai essayé cela sur expo espère que cela aide.

<KeyboardAvoidingView style={{ flex: 1, flexDirection: 'column',justifyContent: 'center',}} behavior="padding" enabled   keyboardVerticalOffset={100}>
    <ScrollView>
        <View style={Styles.row}>
                //your view
        </View>
    </ScrollView>
</KeyboardAvoidingView>
0
Abhi Burk

J'ai rencontré le même problème, bien que j'aie eu une approche différente qui consiste essentiellement à calculer et à positionner (à l'aide de translateY) la vue lorsque le clavier apparaît.

J'ai publié la solution sur github et NPM react-native-spacer .

0
Hieu Jack Nguyen