Компонент KeyboardAvoidingView

Компонент KeyboardAvoidingView оборачивает содержимое экрана и меняет отступ или высоту, чтобы поле ввода не ушло под клавиатуру. Способ сдвига задает behavior из перечисления Behavior. keyboardVerticalOffset добавляет зазор сверху, например под системную полосу.

Синтаксис

<KeyboardAvoidingView behavior="padding">
	<TextInput />
</KeyboardAvoidingView>

Параметры

Параметр	Описание
`behavior`	Как освободить место под клавиатуру. Строка из перечисления `Behavior`.
`keyboardVerticalOffset`	Дополнительный отступ сверху в пикселях. Учитывают высоту заголовка или системной полосы.
`children`	Дочерние элементы, которые нужно сдвинуть вместе с клавиатурой.

Пример

Давайте обернем поле в KeyboardAvoidingView с 'padding':

import { useState } from 'react';
import {
	KeyboardAvoidingView,
	TextInput,
	Platform,
} from 'react-native';

export default function App() {
	const [text, setText] = useState('abcde');

	return (
		<KeyboardAvoidingView
			behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
			style={{ flex: 1 }}
		>
			<TextInput
				value={text}
				onChangeText={setText}
			/>
		</KeyboardAvoidingView>
	);
}

На экране поле остается видимым над клавиатурой при наборе текста.

Пример

Давайте зададим смещение под заголовок экрана:

import { useState } from 'react';
import { KeyboardAvoidingView, TextInput } from 'react-native';

export default function App() {
	const [text, setText] = useState('12345');

	return (
		<KeyboardAvoidingView
			behavior="padding"
			keyboardVerticalOffset={64}
		>
			<TextInput
				value={text}
				onChangeText={setText}
			/>
		</KeyboardAvoidingView>
	);
}

На экране поле сдвигается с учетом дополнительных 64 пикселей сверху.

Смотрите также

перечисление Behavior,
которое задает способ сдвига
класс Keyboard,
который сообщает о клавиатуре на экране
компонент TextInput,
который принимает текст с клавиатуры
компонент ScrollView,
который прокручивает дочерние элементы