Faites défiler la vue lorsque le clavier est ouvert (React Native / Expo)

j'ai du mal à utiliser un clavier D'ordinateur avec Viewsur mon application Expo. Je voudrais rencontrer les exigences suivantes:

  • Lorsque le clavier s'ouvre, la vue doit défiler vers le haut de sorte que l'utilisateur voit toujours l'entrée. C'est le but de KeyboardAvoidingView.
  • l'utilisateur devrait pouvoir faire défiler le afficher lorsque le clavier est ouvert.
  • il ne devrait pas y avoir de bug graphique bizarre.
  • Il devrait fonctionner sur iOS et Android.

j'ai essayé 100 solutions différentes et je n'ai pas pu obtenir un résultat satisfaisant. Comme J'utilise Expo, Je n'ai pas été en mesure d'utiliser https://github.com/APSL/react-native-keyboard-aware-scroll-view comme il faut pour faire des changements à L'AndroidManifest.

en utilisant KeyboardAvoidingView, j'ai trouvé que la meilleure solution est de mettre behavior = "padding" sur iOS, et aucun comportement du tout sur Android. Cependant, il ya encore un problème: de l'espace que l' l'utilisateur peut faire défiler est limitée lorsque le clavier est ouvert. Par conséquent, lorsqu'une vue est une forme longue avec beaucoup d'entrées, l'utilisateur ne peut pas aller au bas de la forme sans fermer le clavier, défiler, puis ouvrir le clavier à nouveau.

j'ai aussi le problème que le clavier s'ouvre juste à droite après l'entrée qui est concentré, mais je voudrais laisser un peu d'espace supplémentaire parce que mon entrées du rembourrage. À l'aide de la keyboardVerticalOffset propriété n'a aucun effet sur ce.

après avoir lu des dizaines de billets sur le sujet, il semble que personne ne comprenne vraiment comment les views Keyboardavoiding fonctionnent et comment les utiliser efficacement. Même sur les docs natifs officiels de React, il est mentionné que "Android et iOS interagissent tous les deux avec ce prop [(comportement)] différemment. Android peut se comporter mieux quand donné aucun comportement prop à tous, alors que iOS est le contraire", comme ils ne comprennent pas vraiment ce qui est cette propriété.

il y a quelqu'un qui avez-vous compris comment utiliser KeyboardAvoidingView et comment l'utiliser pour que les 4 exigences soient satisfaites?

je vous Remercie d'avance pour votre aide!

12
demandé sur Arnaud 2018-09-03 23:51:03

3 réponses

Nous sommes à l'aide de ce

<KeyboardAwareScrollView  keyboardShouldPersistTaps={'always'}
        style={{flex:1}}
        showsVerticalScrollIndicator={false}>
    {/* Your code goes here*/}
</KeyboardAwareScrollView>

et nous n'avons pas en face de l'un des quatre questions

2
répondu Kranthi 2018-09-06 07:24:28

avez-vous essayé KeyboardSpacer de réagissent-native-clavier-entretoise? Je l'utilise avec réagissent-native-éléments et il fonctionne parfaitement! La seule chose que vous devez être prudent, c'est quand vous voulez utiliser un scrollview. Juste être sûr que vous placez à l'extérieur!

2
répondu Gaspar 2018-09-12 17:05:56

je ne comprends pas le problème avec KeyboardAvoidingView

c'est un travail pour moi avec:

<KeyboardAvoidingView style={{flex:1}} behavior="padding" enabled>
  your ui ....
</KeyboardAvoidingView>
0
répondu Idan 2018-09-13 16:02:39