wake-up-neo.com

Scrollen Sie durch die Ansicht, wenn die Tastatur geöffnet ist (React Native/Expo)

Ich habe Schwierigkeiten, eine KeyboardAvoidingView in meiner Expo-App zu verwenden. Ich möchte folgende Voraussetzungen erfüllen:

  • Wenn sich die Tastatur öffnet, sollte die Ansicht nach oben scrollen, damit der Benutzer die Eingabe immer sehen kann. Das ist der Zweck von KeyboardAvoidingView.
  • Der Benutzer sollte in der Lage sein, bei geöffneter Tastatur durch die Ansicht gesamte zu scrollen.
  • Es sollte keine bizarren Grafikfehler geben.
  • Es sollte auf iOS und Android funktionieren.

Ich habe 100 verschiedene Lösungen ausprobiert und konnte kein zufriedenstellendes Ergebnis erzielen. Während ich Expo benutze, konnte ich https://github.com/APSL/react-native-keyboard-aware-scroll-view nicht verwenden, da Änderungen am AndroidManifest erforderlich sind.

Bei der Verwendung von KeyboardAvoidingView habe ich festgestellt, dass die beste Lösung darin besteht, Verhalten = "Auffüllen" für iOS und kein Verhalten für Android festzulegen. Es gibt jedoch immer noch ein Problem: Der Bereich, den der Benutzer durchblättern kann, ist begrenzt, wenn die Tastatur geöffnet ist. Wenn eine Ansicht ein langes Formular mit vielen Eingaben ist, kann der Benutzer daher nicht zum unteren Rand des Formulars wechseln, ohne die Tastatur zu schließen, zu scrollen und die Tastatur erneut zu öffnen.

Ich habe auch das Problem, dass sich die Tastatur direkt nach der fokussierten Eingabe öffnet. Ich möchte jedoch etwas Platz lassen, da meine Eingaben etwas aufgefüllt sind. Die Verwendung der keyboardVerticalOffset-Eigenschaft hat darauf keine Auswirkung.

Nachdem Dutzende von Beiträgen zum Thema gelesen wurden, scheint es, dass niemand wirklich versteht, wie KeyboardAvoidingViews funktionieren und wie man sie effektiv nutzt. Sogar in den offiziellen React Native-Dokumenten wird erwähnt, dass "Android und iOS beide mit dieser Requisite [(Verhalten)] unterschiedlich interagieren. Android verhält sich möglicherweise besser, wenn keine Verhaltensstütze gegeben wird, wohingegen iOS das Gegenteil ist", wie sie es tun Ich verstehe nicht wirklich was diese Eigenschaft ist.

Gibt es jemanden, der die Verwendung von KeyboardAvoidingView verstanden hat und wie man es verwendet, um die 4 Anforderungen zu erfüllen?

Vielen Dank im Voraus für Ihre Hilfe!

react-nativekeyboardexpo
13
Arnaud

Wir benutzen das

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

und wir hatten keine der vier Probleme

2
Kranthi

Haben Sie den KeyboardSpacer aus reag-native-keyboard-spacer ausprobiert? Ich verwende es mit React-Native-Elementen und es funktioniert perfekt! Sie müssen nur vorsichtig sein, wenn Sie einen Bildlauf verwenden möchten. Stellen Sie nur sicher, dass Sie das Äußere platzieren! 

2
Gaspar

Ich verstehe das Problem nicht mit KeyboardAvoidingView

es ist Arbeit für mich mit:

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