Перечисление Behavior

Перечисление Behavior задает способ сдвига у компонента KeyboardAvoidingView. Строку значения передают в параметр behavior. На Android чаще берут 'height', на iOS - 'padding'.

Синтаксис

behavior="padding"

Значения

Значение	Описание
`'height'`	Меняет высоту контейнера, когда клавиатура открыта. Часто подходит на Android.
`'position'`	Сдвигает контейнер абсолютным положением вверх.
`'padding'`	Добавляет нижний внутренний отступ под клавиатуру. Часто подходит на iOS.

Пример

Давайте зададим 'padding' для поля ввода:

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

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

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

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

Пример

Давайте попробуем 'height' на том же поле:

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

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

	return (
		<KeyboardAvoidingView behavior="height" style={{ flex: 1 }}>
			<TextInput
				value={text}
				onChangeText={setText}
			/>
		</KeyboardAvoidingView>
	);
}

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

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

компонент KeyboardAvoidingView,
который сдвигает содержимое из-под клавиатуры
класс Keyboard,
который сообщает о клавиатуре на экране
компонент TextInput,
который принимает текст с клавиатуры
класс Platform,
который подсказывает, какая система запущена