Компонент Pressable

Компонент Pressable оборачивает дочерние элементы и вызывает обработчики при касании. Параметр disabled отключает все события. В children можно передать элемент или функцию с объектом { pressed }, чтобы менять вид, пока палец на экране.

Синтаксис

<Pressable onPress={() => {}}>
	<Text>abcde</Text>
</Pressable>

Параметры

Параметр	Описание
`children`	Дочерние элементы или функция `{ pressed } => элемент`.
`onPress`	Вызов при коротком нажатии и отпускании.
`onLongPress`	Вызов при долгом удержании.
`onPressIn`	Вызов в момент касания.
`onPressOut`	Вызов, когда палец ушёл с области.
`disabled`	При `true` нажатия не обрабатываются.

Пример

Давайте повесим onPress на область с текстом:

import { useState } from 'react';
import { View, Text, Pressable } from 'react-native';

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

	return (
		<View>
			<Pressable onPress={() => setLabel('12345')}>
				<Text>abcde</Text>
			</Pressable>
			<Text>{label}</Text>
		</View>
	);
}

На экране область с 'abcde'; после нажатия подпись станет '12345'.

Пример

Давайте передать children функцией и подсветить нажатие:

import { View, Text, Pressable, StyleSheet } from 'react-native';

export default function App() {
	return (
		<View>
			<Pressable onPress={() => {}}>
				{({ pressed }) => (
					<Text style={pressed ? styles.down : styles.up}>abcde</Text>
				)}
			</Pressable>
		</View>
	);
}

const styles = StyleSheet.create({
	up: {
		opacity: 1,
	},
	down: {
		opacity: 0.5,
	},
});

На экране текст 'abcde'; при удержании он становится полупрозрачным.

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

компонент TouchableOpacity,
который приглушает элемент при нажатии
компонент Button,
который рисует системную кнопку с подписью
компонент Text,
который выводит подпись внутри области нажатия
класс PanResponder,
который отслеживает жест пальцем