Обработка нажатия на кнопку в React Native — это один из фундаментальных элементов взаимодействия пользователя с интерфейсом. React Native предоставляет несколько компонентов для создания интерактивных элементов, которые реагируют на прикосновение, таких как Button, TouchableOpacity, TouchableHighlight, Pressable, TouchableWithoutFeedback и др. Каждый из них имеет свои особенности и применяется в зависимости от задач интерфейса, визуального поведения и кастомизации.

Базовый компонент: Button

Это самый простой способ отобразить кнопку и обработать нажатие.

import { Button, Alert } from 'react-native';
<Button
title="Нажми меня"
onPress={() => Alert.alert('Кнопка нажата')}
/>

• title — текст кнопки.

• onPress — функция, вызываемая при нажатии.

• color — (опционально) цвет текста на Android, фона на iOS.

Ограничения:

• Нельзя задать произвольный стиль (размер, шрифт, иконку).

• Подходит для простых случаев, например, тестов или MVP.

TouchableOpacity

Позволяет оборачивать любой элемент (например, View, Text, Image) и делать его кликабельным, с эффектом прозрачности при нажатии.

import { TouchableOpacity, Text } from 'react-native';
<TouchableOpacity onPress={() => console.log('Нажали')}>
<Text style={{ fontSize: 18, color: 'blue' }}>Кастомная кнопка</Text>
</TouchableOpacity>

Можно полностью контролировать внешний вид с помощью style.

TouchableHighlight

Похож на TouchableOpacity, но при нажатии делает подсветку фона.

import { TouchableHighlight, Text } from 'react-native';
<TouchableHighlight
underlayColor="lightgray"
onPress={() => console.log('Highlight нажата')}
\>
&lt;Text style={{ padding: 10 }}&gt;Нажми меня&lt;/Text&gt;
&lt;/TouchableHighlight&gt;

• underlayColor — цвет подсветки при нажатии.

TouchableWithoutFeedback

Используется, если нужно обработать нажатие, не отображая визуальной реакции.

import { TouchableWithoutFeedback, Keyboard } from 'react-native';
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View>
{/\* контент \*/}
</View>
</TouchableWithoutFeedback>

Часто применяется для скрытия клавиатуры при нажатии вне поля ввода.

Pressable — современный и гибкий способ

Новый компонент с возможностью реакции на разные фазы взаимодействия: onPressIn, onPressOut, onLongPress, onPress.

import { Pressable, Text } from 'react-native';
<Pressable
onPress={() => console.log('Обычное нажатие')}
onLongPress={() => console.log('Долгое нажатие')}
onPressIn={() => console.log('Нажатие началось')}
onPressOut={() => console.log('Нажатие завершено')}
style={({ pressed }) => ({
backgroundColor: pressed ? 'gray' : 'white',
padding: 10,
borderRadius: 5,
})}
\>
&lt;Text&gt;Pressable кнопка&lt;/Text&gt;
&lt;/Pressable&gt;

• style может быть функцией, зависящей от состояния pressed.

• Можно комбинировать с анимациями или динамическими эффектами.

Варианты функций-обработчиков

Простая функция

onPress={() => console.log('Нажато')}

Вызов внешней функции

function handleClick() {
console.log('Обработано отдельно');
}
<TouchableOpacity onPress={handleClick}>
<Text>Нажми</Text>
</TouchableOpacity>

Функция с аргументами

const onItemPress = (id) => {
console.log('Нажато на элемент с ID:', id);
};
<TouchableOpacity onPress={() => onItemPress(123)}>
<Text>Элемент 123</Text>
</TouchableOpacity>

Обработка длительного нажатия: onLongPress

<Pressable onLongPress={() => console.log('Удержано')}>
<Text>Удержи меня</Text>
</Pressable>

Работает и в TouchableOpacity, Pressable и других Touchable-*.

Обратная связь пользователю

Часто при нажатии удобно использовать:

Alert

import { Alert } from 'react-native';
<Button
title="Удалить"
onPress={() =>
Alert.alert(
'Подтверждение',
'Вы уверены?',
\[
{ text: 'Отмена', style: 'cancel' },
{ text: 'Да', onPress: () => console.log('Удалено') },
\]
)
}
/>

Toast (в Android через ToastAndroid)

import { ToastAndroid } from 'react-native';
ToastAndroid.show('Операция выполнена', ToastAndroid.SHORT);

Для кроссплатформенных тостов — библиотеки:

• react-native-toast-message

• react-native-root-toast

Пример кастомной кнопки

import { TouchableOpacity, Text, StyleSheet } from 'react-native';
function CustomButton({ onPress, title }) {
return (
<TouchableOpacity style={styles.button} onPress={onPress}>
<Text style={styles.text}>{title}</Text>
</TouchableOpacity>
);
}
const styles = StyleSheet.create({
button: {
backgroundColor: '#3498db',
paddingVertical: 12,
paddingHorizontal: 20,
borderRadius: 6,
},
text: {
color: '#fff',
fontSize: 16,
textAlign: 'center',
},
});

Использование:

<CustomButton title="Войти" onPress={() => console.log('Вход')} />

Поведение и UX

При создании кнопок важно учитывать:

• Визуальную обратную связь при нажатии (opacity, цвет, анимация);

• Поведение при удержании или двойном нажатии;

• Блокировку многократных нажатий (дебаунс/троттлинг);

• Доступность (accessibilityLabel, accessible, accessibilityRole);

Советы по хорошему UX

1. Используйте Pressable для продвинутых сценариев — он заменяет все старые Touchable-*.

2. Сделайте кнопки визуально отличимыми — достаточный отступ, цвет, высота.

3. Используйте хук useCallback для обработчиков, чтобы избежать лишних перерендеров.

4. Добавляйте состояние загрузки, если обработка длительная:

const \[loading, setLoading\] = useState(false);
const handlePress = async () => {
setLoading(true);
await doSomeAsyncAction();
setLoading(false);
};
<Button title={loading ? 'Загрузка...' : 'Отправить'} onPress={handlePress} />

Обработка нажатий в React Native гибко реализуется через компоненты обёртки, каждый из которых предоставляет разные уровни контроля над взаимодействием пользователя с UI. Выбор подходящего способа зависит от требований к визуальному поведению, анимациям, сложности взаимодействия и кастомизации внешнего вида кнопки.