Прокрутите список, когда клавиатура открыта (React Native/Expo)

Мне сложно с помощью KeyboardAvoidingView на моем приложении Expo. Я хотел бы выполнить следующие требования:

  • Когда клавиатура открывается, представление должно прокручиваться так, чтобы пользователь всегда видел вход. Это цель KeyboardAvoidingView.
  • Пользователь должен иметь возможность прокручивать весь вид, когда клавиатура открыта.
  • Не должно быть какого-либо причудливого графического сбоя.
  • Он должен работать на iOS и Android.

Я попробовал 100 различных решений, и я не смог получить удовлетворительный результат. Поскольку я использую Expo, я не смог использовать https://github.com/APSL/react-native-keyboard-aware-scroll-view, поскольку он требует внести изменения в AndroidManifest.

Используя KeyboardAvoidingView, я обнаружил, что лучшим решением является установка поведения = "padding" на iOS и вообще никакого поведения на Android. Однако по-прежнему существует проблема: пространство, которое пользователь может прокручивать, ограничен, когда клавиатура открыта. Следовательно, когда представление представляет собой длинную форму с большим количеством входов, пользователь не может перейти к нижней части формы, не закрывая клавиатуру, прокручивая ее, а затем снова открывая клавиатуру.

У меня также есть проблема, что клавиатура открывается сразу после ввода, который сфокусирован, но я хотел бы оставить дополнительное пространство, потому что у моих входов есть отступы. Использование свойства keyboardVerticalOffset не влияет на это.

Прочитав десятки сообщений по теме, кажется, что никто не понимает, как работают KeyboardAvoidingViews и как их эффективно использовать. Даже в официальных документах React Native упоминается, что "Android и iOS оба взаимодействуют с этой опцией [(поведением)] по-разному. Android может вести себя лучше, если вообще не поддерживать поведение, в то время как iOS противоположна", Я действительно понимаю, что это за свойство.

Есть ли кто-то, кто понял, как использовать KeyboardAvoidingView и как его использовать, чтобы удовлетворить 4 требования?

Заранее спасибо за вашу помощь!

Ответы

Ответ 1

Мы используем эту

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

и мы не столкнулись ни с одним из четырех вопросов

Ответ 2

Вы пробовали KeyboardSpacer с помощью реакции-родной-клавиатуры-spacer? Я использую его с элементами реакции-native, и он отлично работает! Единственное, что вам нужно быть осторожным, - это когда вы хотите использовать scrollview. Просто убедитесь, что вы поместили на улицу!

Ответ 3

Я не понимаю проблему с KeyboardAvoidingView

он работает для меня с:

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