Когда вы работаете с приложениями React Native, распространенной проблемой является то, что клавиатура выскакивает и скрывает ввод текста, когда вы на них сосредотачиваетесь. Что-то вроде этого:

Есть несколько способов избежать этого. Некоторые из них просты, некоторые менее. Некоторые можно настроить, другие - нет. Сегодня я покажу вам 3 различных способа избежать использования клавиатуры в React Native.

Я разместил весь исходный код этого руководства на Github.

КлавиатураИзбегатьПросмотр

Самым простым решением и самым легким в установке является KeyboardAvoidingView. Это основной компонент, но он также довольно прост в том, что делает.

Вы можете взять базовый код, в котором клавиатура закрывает вводы, и обновить его, чтобы вводы больше не закрывались. Первое, что вам нужно сделать, это заменить контейнер View на KeyboardAvoidingView, а затем добавить к нему опору behavior. Если вы посмотрите документацию, то увидите, что она принимает 3 разных значения - height, padding, position. Я обнаружил, что padding работает наиболее предсказуемым образом. Вот что я буду использовать.

Это дает нам следующий результат. Это не идеально, но почти для любой работы вполне годится.

Следует отметить, что в строке 30 вы увидите View с высотой 60 пикселей. Я обнаружил, что клавиатура, избегающая представления, не совсем работает с последним элементом, а установка отступов / полей не работает. Поэтому я добавил новый элемент, чтобы «поднять» все на несколько пикселей.

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

Пользователи Android: я считаю, что это лучший / единственный вариант. Добавив android:windowSoftInputMode="adjustResize" в ваш AndroidManifest.xml, операционная система возьмет на себя большую часть работы за вас, а KeyboardAvoidingView позаботится обо всем остальном. Пример AndroidManifest.xml. Дальнейшая часть этой статьи, скорее всего, к вам не относится.

С клавиатурой ScrollView

Следующая опция - реакция-собственная-клавиатура-просмотр-прокрутка, которая дает вам много денег за ваши деньги. За кулисами он использует ScrollView или ListView для обработки всего (в зависимости от выбранного вами компонента), что делает взаимодействие с прокруткой довольно плавным. Другим важным преимуществом этого пакета является то, что он будет прокручиваться к входу, который находится в фокусе, что дает пользователю приятный опыт.

Использование также очень простое - вам просто нужно заменить контейнер View, снова начиная с базового кода, и установить несколько параметров. Вот код, я опишу его.

Во-первых, вы хотите установить backgroundColor для ScrollView таким образом (если вы повторно включили прокрутку), backgroundColor всегда остается неизменным. Затем вы хотите сообщить компоненту, где находится позиция по умолчанию, чтобы после закрытия клавиатуры он возвращался в это место - если опустить эту опору, представление может застрять вверху после закрытия клавиатуры, как это.

После свойства resetScrollToCoords вы устанавливаете contentContainerStyle -, который по существу заменяет содержащиеся стили View, которые у вас были раньше. Последнее, что я делаю, - это отключение прокрутки от взаимодействия с пользователем. Это может не всегда иметь смысл для вашего пользовательского интерфейса (например, интерфейса, в котором пользователь редактирует множество полей профиля), но для этого так и не имеет смысла разрешать пользователю прокрутку вручную, потому что прокручивать нечего. к.

Объединив эти реквизиты вместе, вы получите следующий результат, который работает довольно хорошо.

Модуль клавиатуры

Это, безусловно, наиболее ручной вариант, но он также дает вам наибольший контроль. Вы будете использовать анимированную библиотеку, чтобы обеспечить плавное взаимодействие, как вы видели раньше.

Модуль Keyboard, который не документирован на сайте React Native, позволяет прослушивать события клавиатуры, исходящие от устройства. Вы будете использовать следующие события: keyboardWillShow и keyboardWillHide, которые возвращают продолжительность анимации и конечное положение клавиатуры (среди другой информации).

Если вы работаете на Android, вам лучше использовать keyboardDidShow и keyboardDidHide.

Когда генерируется событие keyboardWillShow, вы устанавливаете для анимированной переменной конечную высоту клавиатуры и заставляете ее анимироваться в течение той же продолжительности, что и анимация сдвига клавиатуры. Затем вы используете это анимированное значение, чтобы установить отступ в нижней части контейнера, чтобы поднять все содержимое вверх.

Я покажу код через мгновение, но выполнение того, что я описал выше, оставляет нам этот опыт.

На этот раз я хочу исправить это изображение. Для этого вы будете использовать анимированное значение для управления высотой изображения, которое вы будете настраивать при открытии клавиатуры. Вот код.

Это, безусловно, намного больше, чем любое другое решение. Вместо обычных View или Image вы используете Animated.View и Animated.Image, чтобы можно было использовать анимированные значения. Самое интересное в функциях keyboardWillShow и keyboardWillHide, где анимированные значения меняются.

Здесь происходит то, что два анимированных значения изменяются параллельно, которые затем используются для управления пользовательским интерфейсом. Это оставляет вас с этим.

Кода намного больше, но он довольно приятный. У вас есть много вариантов того, что вы можете сделать, и вы действительно можете настроить взаимодействие по своему усмотрению.

Комбинирование вариантов

Если вы хотите сохранить код, вы можете комбинировать несколько вариантов, что я обычно и делаю. Например, объединив варианты 1 и 3, вам нужно только позаботиться об управлении и анимации высоты изображения.

Код не намного меньше, чем исходный код варианта 3, но по мере роста сложности пользовательского интерфейса он может вам немного помочь.

У каждой реализации есть свои плюсы и минусы - вам нужно будет выбрать наиболее подходящую с учетом пользовательского опыта, к которому вы стремитесь.

Надеюсь, вам понравился этот урок! Если вы хотите стать разработчиком React Native, присоединяйтесь к более чем 18 000 других в изучении React Native на примерах!