Компонент InputAccessoryView

Компонент InputAccessoryView показывает полоску над клавиатурой на iOS. Содержимое панели задают дочерние элементы. Поле TextInput связывают через inputAccessoryViewID, равный nativeID панели. На Android панель не отображается.

Синтаксис

<InputAccessoryView nativeID="accessory">
	<Button title="abcde" onPress={() => {}} />
</InputAccessoryView>

Параметры

Параметр	Описание
`nativeID`	Идентификатор панели. Тот же строковый id передают в `inputAccessoryViewID` у поля ввода.
`children`	Дочерние элементы панели: кнопки и подписи.

Пример

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

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

const accessoryId = 'fieldAccessory';

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

	return (
		<View>
			<TextInput
				value={text}
				onChangeText={setText}
				inputAccessoryViewID={accessoryId}
			/>
			<InputAccessoryView nativeID={accessoryId}>
				<Button title="12345" onPress={() => setText('')} />
			</InputAccessoryView>
		</View>
	);
}

На экране iOS над клавиатурой видна кнопка '12345'. Нажатие очищает строку в поле.

Пример

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

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

const accessoryId = 'rowAccessory';

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

	return (
		<View>
			<TextInput
				value={text}
				onChangeText={setText}
				inputAccessoryViewID={accessoryId}
			/>
			<InputAccessoryView nativeID={accessoryId}>
				<View style={styles.row}>
					<Button title="abcde" onPress={() => {}} />
					<Button title="12345" onPress={() => {}} />
				</View>
			</InputAccessoryView>
		</View>
	);
}

const styles = StyleSheet.create({
	row: {
		flexDirection: 'row',
	},
});

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

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

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