Автор оригинала: FreeCodeCamp Community Member.
Спенсер Карли
Когда вы работаете с нативными приложениями RACT, общая проблема состоит в том, что клавиатура появится и скрывает входы текста, когда вы сосредоточены на них. Что-то вроде этого:
Есть несколько способов избежать этого. Некоторые простые, некоторые меньше. Некоторые могут быть настроены, другие не могут. Сегодня я покажу вам 3 разных способа избежать клавиатуры в реактивном родном.
KeyboardavoidingView.
Самое простое решение, а самые простые для установки, это KeyboardavoidingView Отказ Это основной компонент, но это также довольно просто в том, что он делает.
Вы можете взять Базовый код , который имеет клавиатуру, покрывающую входы, и обновляет то, что входы больше не покрываются. Первое, что вам нужно сделать, это заменить контейнер Вид с KeyboardavoidingView а затем добавьте поведение опоры к этому. Если вы посмотрите на документацию, вы увидите, что он принимает 3 разных значения – Высота, прокладки, позиция Отказ Я нашел это прокладка Работает самым предсказуемым образом. Так что это то, что я буду использовать.
import React from 'react';
import { View, TextInput, Image, KeyboardAvoidingView } from 'react-native';
import styles from './styles';
import logo from './logo.png';
const Demo = () => {
return (
);
};
export default Demo;Это дает нам следующий результат. Это не идеально, но для едва любой работы, это неплохо.
Одно следует отметить, что на линии 30 вы увидите Вид У этого есть высота, установленная на 60 пикселей. Я обнаружил, что вид на клавиатуру, избегая просмотра, не совсем работает с последним элементом, и настраивая нагрузка/маржа не работала. Поэтому я добавил новый элемент для «ударов» всего на несколько пикселей.
Изображение в верхней части выдвигается из вида при использовании этой простой реализации. Я покажу вам, как вы можете исправить это в конце.
Клавиатура осознает ScrollView.
Следующий вариант – это React-Nature-Keyboard-Aware-Scroll-View Что дает вам много взрывов для вашего доллара. За кулисами используют ScrollView или ListView для обработки всего (в зависимости от выбранного вами компонента), что делает прокрутку взаимодействия довольно бесшовные. Другая основная выгода для этого пакета заключается в том, что он будет прокручивать на вход, который находится в фокусе, который дает пользователю хороший опыт.
Использование также очень легко – вам просто нужно поменять контейнер Вид снова начиная с Базовый код и установите несколько вариантов. Вот код, то я опишу это.
import React from 'react';
import { View, TextInput, Image } from 'react-native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
import styles from './styles';
import logo from './logo.png';
const Demo = () => {
return (
);
};
export default Demo;Сначала вы хотите установить backgroundcolor ScrollView таким образом (если вы должны были повторно включить прокрутку) Фонколь всегда одинаково. Далее вы хотите сказать компонент, в котором позиция по умолчанию так, чтобы, как только клавиатура закрыта, она возвращается к этому пятно -, опуская эту опору, можно застревать в верхней части после закрытия клавиатуры, как это.
После Resetscrolltocoords опора вы установили ContentContainerstyle – Это по существу заменяет содержащие Вид Стили у тебя было раньше. Последняя вещь, которую я делаю, это отключение ScrollView от взаимодействия пользователя. Это может не всегда иметь смысл для вашего пользовательского интерфейса (например, интерфейс, в котором пользователь редактирует много полей профиля), но для этого он не имеет большого смысла позволить пользователю вручную прокрутить, потому что нечего прокручивать к.
Объединяя эти реквизиты вместе, вы получаете следующий результат, который работает довольно хорошо.
Модуль клавиатуры
Это безусловно, самый ручной вариант, но также дает вам наибольшее управление. Вы будете использовать анимированную библиотеку, чтобы помочь дать плавные взаимодействия, как вы видели раньше.
Модуль клавиатуры, который не задокументирован на собственном сайте raction, позволяет прослушивать события клавиатуры, испускаемые с устройства. События, которые вы используете, являются Keyboardwillshow и KeyboardwillHide , который возвращает промежуток времени, когда анимация возьмет и окончание клавиатуры (среди другой информации).
Когда Keyboardwillshow Событие выделяется, вы устанавливаете анимированную переменную в конечную высоту клавиатуры и имейте ее анимацию на ту же продолжительность, что и анимация скольжения клавиатуры. Затем вы используете это анимированное значение для установки прокладки в нижней части контейнера, чтобы поднять все контент.
Я покажу код в мгновение, но делаю то, что я описал выше, оставляет нас этим опытом.
Я хочу исправить это изображение на этот раз. Для этого вы будете использовать анимированное значение для управления высотой изображения, которое вы нарегулируете, когда открывается клавиатура. Вот код.
import React, { Component } from 'react';
import { View, TextInput, Image, Animated, Keyboard } from 'react-native';
import styles, { IMAGE_HEIGHT, IMAGE_HEIGHT_SMALL} from './styles';
import logo from './logo.png';
class Demo extends Component {
constructor(props) {
super(props);
this.keyboardHeight = new Animated.Value(0);
this.imageHeight = new Animated.Value(IMAGE_HEIGHT);
}
componentWillMount () {
this.keyboardWillShowSub = Keyboard.addListener('keyboardWillShow', this.keyboardWillShow);
this.keyboardWillHideSub = Keyboard.addListener('keyboardWillHide', this.keyboardWillHide);
}
componentWillUnmount() {
this.keyboardWillShowSub.remove();
this.keyboardWillHideSub.remove();
}
keyboardWillShow = (event) => {
Animated.parallel([
Animated.timing(this.keyboardHeight, {
duration: event.duration,
toValue: event.endCoordinates.height,
}),
Animated.timing(this.imageHeight, {
duration: event.duration,
toValue: IMAGE_HEIGHT_SMALL,
}),
]).start();
};
keyboardWillHide = (event) => {
Animated.parallel([
Animated.timing(this.keyboardHeight, {
duration: event.duration,
toValue: 0,
}),
Animated.timing(this.imageHeight, {
duration: event.duration,
toValue: IMAGE_HEIGHT,
}),
]).start();
};
render() {
return (
);
}
};
export default Demo;Наверняка намного больше, чем любая из других решений. А не нормальный Вид или Изображение Вы используете Animated.View и Анимирован .Image так что анимированные значения могут быть использованы. Веселая часть на самом деле в Keyboardwillshow и KeyboardwillHide Функции, где анимированные значения меняются.
Что происходит, есть то, что две анимированные значения меняются параллельно, которые затем используются для привода UI. Это оставляет вас с этим.
Это справедливое количество кода, но это довольно Slick. У вас есть много вариантов для того, что вы можете сделать, и действительно могут настроить взаимодействие в ваши сердца.
Объединение вариантов
Если вы хотите сохранить какой-нибудь код, вы можете комбинировать несколько вариантов, которые я имею тенденцию делать. Например, объединяя вариант 1 и 3, вам нужно только беспокоиться о управлении и анимацией высоты изображения.
Код не намного меньше, чем источник опции 3, но, как пользователь, растет в сложности, это может помочь вам немного.
import React, { Component } from 'react';
import { View, TextInput, Image, Animated, Keyboard, KeyboardAvoidingView } from 'react-native';
import styles, { IMAGE_HEIGHT, IMAGE_HEIGHT_SMALL } from './styles';
import logo from './logo.png';
class Demo extends Component {
constructor(props) {
super(props);
this.imageHeight = new Animated.Value(IMAGE_HEIGHT);
}
componentWillMount () {
this.keyboardWillShowSub = Keyboard.addListener('keyboardWillShow', this.keyboardWillShow);
this.keyboardWillHideSub = Keyboard.addListener('keyboardWillHide', this.keyboardWillHide);
}
componentWillUnmount() {
this.keyboardWillShowSub.remove();
this.keyboardWillHideSub.remove();
}
keyboardWillShow = (event) => {
Animated.timing(this.imageHeight, {
duration: event.duration,
toValue: IMAGE_HEIGHT_SMALL,
}).start();
};
keyboardWillHide = (event) => {
Animated.timing(this.imageHeight, {
duration: event.duration,
toValue: IMAGE_HEIGHT,
}).start();
};
render() {
return (
);
}
};
export default Demo;Каждая реализация имеет свои плюсы и минусы – вам придется выбрать наиболее подходящую, причитающую пользовательский опыт, на который вы стремитесь.