Обработка касаний: Pressable, кнопки

Учимся реагировать на касания пальцем — в мобильных приложениях это вместо клика мышью.

В вебе элементы реагируют на onClick, в React Native — на касание (onPress), потому что экран сенсорный.

Button — самый простой

Button — готовая кнопка с минимумом настроек. Удобна для быстрых прототипов, но выглядит по-разному на iOS и Android и плохо стилизуется.

import { Button } from "react-native";

function Demo() {
  return <Button title="Нажми меня" onPress={() => console.log("нажато")} />;
}

Обратите внимание: обработчик называется onPress, а не onClick. Текст задаётся пропом title, а не дочерним элементом.

TouchableOpacity — кнопка с реакцией

TouchableOpacity оборачивает любое содержимое и при нажатии слегка затемняет его (меняет прозрачность), давая визуальный отклик. Так можно сделать кнопку любого вида.

import { TouchableOpacity, Text } from "react-native";

function CustomButton() {
  return (
    <TouchableOpacity onPress={() => console.log("тап")}>
      <Text style={{ color: "white", backgroundColor: "tomato", padding: 12 }}>
        Своя кнопка
      </Text>
    </TouchableOpacity>
  );
}

Pressable — современный и универсальный

Pressable — рекомендованный сегодня компонент. Он гибче: умеет реагировать на нажатие, отпускание, долгое нажатие и менять стиль в зависимости от состояния «нажато / не нажато».

import { Pressable, Text } from "react-native";

function PressButton() {
  return (
    <Pressable
      onPress={() => console.log("обычное нажатие")}
      onLongPress={() => console.log("долгое нажатие")}
      style={({ pressed }) => ({
        opacity: pressed ? 0.5 : 1,
        padding: 12,
        backgroundColor: "tomato",
      })}
    >
      <Text style={{ color: "white" }}>Нажми или удержи</Text>
    </Pressable>
  );
}

Здесь style — это функция, которая получает объект с полем pressed. Пока палец прижат, прозрачность меняется на 0.5 — пользователь видит, что кнопка «нажалась».

Что выбрать

Считаем нажатия — обычный JS

Логика обработчика — обычный JavaScript. Смоделируем счётчик нажатий (запускаемый пример):

let count = 0;

function handlePress() {
  count = count + 1;
  console.log("Нажатий:", count);
}

handlePress();
handlePress();
handlePress();

Вывод:

Нажатий: 1
Нажатий: 2
Нажатий: 3

Итог

• На сенсорном экране используем onPress, а не onClick.
• Button — быстро, TouchableOpacity — с затемнением, Pressable — гибкий и рекомендованный.
• Pressable умеет менять стиль по состоянию pressed и ловить долгие нажатия.