Перечисление PointerEvents

Перечисление PointerEvents задает строки для параметра pointerEvents у View и других компонентов. Значение решает, получит ли элемент касание и пройдет ли оно к дочерним элементам.

Синтаксис

<View pointerEvents="box-none">

Значения

Значение	Описание
`'auto'`	Контейнер и дочерние элементы получают касания как обычно.
`'none'`	Контейнер и дочерние элементы не получают касания.
`'box-none'`	Сам контейнер не получает касания, дочерние элементы получают.
`'box-only'`	Касание попадает только в контейнер, дочерние элементы его не получают.

Пример

Давайте пропустим касания через обертку к кнопке внутри:

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

export default function App() {
	return (
		<View style={styles.overlay} pointerEvents="box-none">
			<Pressable style={styles.btn}>
				<Text>abcde</Text>
			</Pressable>
		</View>
	);
}

const styles = StyleSheet.create({
	overlay: {
		...StyleSheet.absoluteFillObject,
	},
	btn: {
		padding: 12,
	},
});

На экране нажатие дойдет до Pressable, хотя поверх лежит прозрачный View.

Пример

Давайте отключим касания для всего блока:

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

export default function App() {
	return (
		<View pointerEvents="none">
			<Pressable>
				<Text>12345</Text>
			</Pressable>
		</View>
	);
}

На экране кнопка не отреагирует на нажатие, пока стоит 'none'.

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

компонент View,
который принимает параметр pointerEvents
компонент Pressable,
который обрабатывает нажатие
компонент TouchableOpacity,
который приглушает элемент при нажатии
перечисление Display,
которое убирает элемент из раскладки