Класс PanResponder
Класс PanResponder не рисует элементы сам.
Метод create
принимает объект конфигурации и возвращает panHandlers.
Объект panHandlers раскрывают на
View
через spread, чтобы View получал события жеста.
Синтаксис
import { PanResponder } from 'react-native';
const pan = PanResponder.create({});
<View {...pan.panHandlers} />;
Методы
| Метод | Описание |
|---|---|
create |
Собирает обработчики жеста и возвращает panHandlers.
|
Пример
Давайте повесить пустые обработчики на блок:
import { useRef } from 'react';
import { View, Text, PanResponder } from 'react-native';
export default function App() {
const pan = useRef(
PanResponder.create({
onStartShouldSetPanResponder: () => true,
}),
).current;
return (
<View {...pan.panHandlers}>
<Text>abcde</Text>
</View>
);
}
На экране текст 'abcde' внутри области, которая перехватывает касание.
Пример
Давайте вывести смещение пальца в консоль:
import { useRef } from 'react';
import { View, Text, PanResponder } from 'react-native';
export default function App() {
const pan = useRef(
PanResponder.create({
onMoveShouldSetPanResponder: () => true,
onPanResponderMove: (_, gestureState) => {
console.log(gestureState.dx, gestureState.dy);
},
}),
).current;
return (
<View {...pan.panHandlers}>
<Text>12345</Text>
</View>
);
}
На экране '12345'; при перетаскивании в консоли растут dx и dy.
