Компонент TextInput

Компонент TextInput рисует поле ввода на экране. Текущую строку держат в параметре value и обновляют через onChangeText. Тип клавиатуры, кнопку действия и регистр задают keyboardType, returnKeyType и autoCapitalize. Управление фокусом и очисткой строки - через ref и методы focus, blur и clear.

Синтаксис

<TextInput value={text} onChangeText={setText} />

Параметры

Параметр	Описание
`value`	Текущая строка в поле.
`onChangeText`	Вызов при каждом изменении текста. На вход приходит новая строка.
`placeholder`	Подсказка, пока поле пустое.
`secureTextEntry`	Скрывает вводимые символы, как в поле пароля.
`multiline`	Разрешает несколько строк и перенос текста.
`keyboardType`	Какую клавиатуру открыть. Строка из перечисления `KeyboardType`.
`returnKeyType`	Подпись кнопки действия на клавиатуре. Строка из перечисления `ReturnKeyType`.
`autoCapitalize`	Как поднимать регистр букв при вводе. Строка из перечисления `AutoCapitalize`.
`onSubmitEditing`	Вызов при нажатии кнопки действия на клавиатуре.

Методы

Метод	Описание
`focus`	Ставит фокус в поле и открывает клавиатуру.
`blur`	Снимает фокус с поля.
`clear`	Очищает текст внутри поля на стороне нативного элемента.

Пример

Давайте свяжем поле со строкой в состоянии:

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

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

	return (
		<TextInput
			value={text}
			onChangeText={setText}
			placeholder="12345"
		/>
	);
}

На экране видно поле с текстом 'abcde'. При наборе строка в состоянии меняется вместе с полем.

Пример

Давайте откроем цифровую клавиатуру и подпись кнопки 'done':

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

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

	return (
		<TextInput
			value={text}
			onChangeText={setText}
			keyboardType="number-pad"
			returnKeyType="done"
			onSubmitEditing={() => {}}
		/>
	);
}

На экране поле показывает '12345'. Клавиатура открывается с цифрами, а кнопка действия подписана как готово.

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

перечисление KeyboardType,
которое задает тип клавиатуры
класс Keyboard,
который сообщает о клавиатуре на экране
компонент Switch,
который переключает булево значение
компонент KeyboardAvoidingView,
который сдвигает содержимое из-под клавиатуры