web-dev-qa-db-fra.com

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

J'ai de la difficulté à utiliser KeyboardAvoidingView sur mon application Expo. J'aimerais répondre aux exigences suivantes:

  • Lorsque le clavier s'ouvre, la vue doit défiler vers le haut pour que l'utilisateur voie toujours l'entrée. C'est le but de KeyboardAvoidingView.
  • L'utilisateur doit pouvoir faire défiler la vue entière lorsque le clavier est ouvert.
  • Il ne devrait y avoir aucun problème graphique bizarre.
  • Cela devrait fonctionner sur iOS et Android.

J'ai essayé 100 solutions différentes et je ne pouvais pas obtenir un résultat satisfaisant. Comme j'utilise Expo, je n'ai pas pu utiliser https://github.com/APSL/react-native-keyboard-aware-scroll-view car il faut modifier le Manifeste Android.

En utilisant KeyboardAvoidingView, j'ai trouvé que la meilleure solution consiste à mettre behavior = "padding" sur iOS, et aucun comportement du tout sur Android. Cependant, il y a toujours un problème: l'espace que l'utilisateur peut faire défiler est limité lorsque le clavier est ouvert. Par conséquent, lorsqu'une vue est un formulaire long comportant de nombreuses entrées, l'utilisateur ne peut pas accéder au bas du formulaire sans fermer le clavier, faire défiler l'écran, puis rouvrir le clavier.

J'ai également le problème que le clavier s'ouvre juste après l'entrée qui est ciblée, mais j'aimerais laisser de l'espace supplémentaire car mes entrées ont un remplissage. L'utilisation de la propriété keyboardVerticalOffset n'a aucun effet sur cela.

Après avoir lu des dizaines de publications sur le sujet, il semble que personne ne comprenne vraiment comment fonctionne KeyboardAvoidingViews et comment les utiliser efficacement. Même sur les documents officiels de React Native, il est mentionné qu'Android et iOS interagissent différemment avec cet accessoire [(comportement)]. Android peut se comporter mieux s'il ne dispose d'aucun accessoire, alors qu'iOS est l'inverse " 'comprends pas vraiment quelle est cette propriété.

Y a-t-il quelqu'un qui a compris comment utiliser KeyboardAvoidingView et comment l'utiliser de manière à satisfaire les 4 exigences?

Merci d'avance pour votre aide!

react-nativekeyboardexpo
13
Arnaud

Nous utilisons ceci

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

et nous ne sommes confrontés à aucun des quatre problèmes

2
Kranthi

Avez-vous essayé KeyboardSpacer de react-native-keyboard-spacer ? Je l'utilise avec react-native-elements et cela fonctionne parfaitement! La seule chose à laquelle vous devez faire attention est lorsque vous souhaitez utiliser une vue à défilement. Assurez-vous simplement que vous placez l'extérieur! 

2
Gaspar

Je ne comprends pas le problème avec KeyboardAvoidingView

ça marche pour moi avec:

<KeyboardAvoidingView style={{flex:1}} behavior="padding" enabled>
  your ui ....
</KeyboardAvoidingView>
0
Idan