Класс Keyboard

Класс Keyboard не рисует элементы на экране. Через него закрывают клавиатуру, проверяют видимость и подписываются на появление и скрытие. Методы dismiss, isVisible, addListener и removeAllListeners вызывают напрямую у класса.

Синтаксис

import { Keyboard } from 'react-native';

Keyboard.dismiss();

Методы

Метод	Описание
`dismiss`	Закрывает экранную клавиатуру.
`isVisible`	Возвращает `true`, если клавиатура сейчас на экране.
`addListener`	Подписывает функцию на событие клавиатуры.
`removeAllListeners`	Снимает все подписки на одно имя события.

Пример

Давайте закроем клавиатуру по нажатию кнопки:

import { useState } from 'react';
import { View, TextInput, Button, Keyboard } from 'react-native';

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

	return (
		<View>
			<TextInput
				value={text}
				onChangeText={setText}
			/>
			<Button title="12345" onPress={Keyboard.dismiss} />
		</View>
	);
}

На экране поле и кнопка. После нажатия кнопки клавиатура скрывается.

Пример

Давайте узнаем высоту клавиатуры при показе:

import { useEffect, useState } from 'react';
import { Text, Keyboard } from 'react-native';

export default function App() {
	const [height, setHeight] = useState(0);

	useEffect(() => {
		const sub = Keyboard.addListener('keyboardDidShow', (event) => {
			setHeight(event.endCoordinates.height);
		});
		return () => sub.remove();
	}, []);

	return <Text>{height ? '12345' : 'abcde'}</Text>;
}

На экране сначала текст 'abcde'. После открытия клавиатуры подпись меняется на '12345'.

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

компонент TextInput,
который принимает текст с клавиатуры
компонент KeyboardAvoidingView,
который сдвигает содержимое из-под клавиатуры
перечисление KeyboardDismissMode,
которое задает скрытие клавиатуры при прокрутке
перечисление KeyboardShouldPersistTaps,
которое решает, останется ли клавиатура после касания