react-native-gesture-handler
- это библиотека для управления жестами в React Native, которая обеспечивает более гибкое и производительное управление жестами по сравнению с встроенными средствами. В этой статье мы подробно рассмотрим, как использовать react-native-gesture-handler
с примерами для начинающих.
Установка
npm install react-native-gesture-handler
npx pod-install
Для установки этой библиотеки используйте команды выше. Убедитесь, что вы также выполнили npx pod-install
для установки необходимых зависимостей на iOS.
Основные компоненты и хуки
Библиотека предоставляет несколько компонентов и хуков для работы с жестами, включая PanGestureHandler
, TapGestureHandler
, FlingGestureHandler
и другие.
Пример использования PanGestureHandler
PanGestureHandler используется для обработки жестов перетаскивания. Рассмотрим простой пример:
import React, { useState } from 'react';
import { View, StyleSheet, Animated } from 'react-native';
import { PanGestureHandler } from 'react-native-gesture-handler';
export default function App() {
const [translation] = useState(new Animated.ValueXY());
const onGestureEvent = Animated.event(
[{ nativeEvent: { translationX: translation.x, translationY: translation.y } }],
{ useNativeDriver: true }
);
return (
<PanGestureHandler onGestureEvent={onGestureEvent}>
<Animated.View style={[styles.box, { transform: translation.getTranslateTransform() }]} />
</PanGestureHandler>
);
}
const styles = StyleSheet.create({
box: {
width: 100,
height: 100,
backgroundColor: 'blue',
},
});
В этом примере мы используем PanGestureHandler
для обработки жестов перетаскивания синего квадрата.
Пример использования TapGestureHandler
TapGestureHandler используется для обработки жестов нажатия. Вот пример:
import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { TapGestureHandler, State } from 'react-native-gesture-handler';
export default function App() {
const [count, setCount] = useState(0);
const onHandlerStateChange = ({ nativeEvent }) => {
if (nativeEvent.state === State.END) {
setCount(count + 1);
}
};
return (
<TapGestureHandler onHandlerStateChange={onHandlerStateChange}>
<View style={styles.container}>
<Text style={styles.text}>Tapped {count} times</Text>
</View>
</TapGestureHandler>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
text: {
fontSize: 24,
},
});
Здесь мы используем TapGestureHandler
для увеличения счетчика при каждом нажатии на текст.
Пример использования FlingGestureHandler
FlingGestureHandler используется для обработки жестов быстрого скольжения. Рассмотрим следующий пример:
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { FlingGestureHandler, Directions, State } from 'react-native-gesture-handler';
export default function App() {
const onFling = ({ nativeEvent }) => {
if (nativeEvent.state === State.END) {
alert('Fling detected!');
}
};
return (
<FlingGestureHandler direction={Directions.UP} onHandlerStateChange={onFling}>
<View style={styles.container}>
<Text style={styles.text}>Fling up to trigger alert</Text>
</View>
</FlingGestureHandler>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
text: {
fontSize: 24,
},
});
В этом примере мы используем FlingGestureHandler
для отображения алерта при быстром скольжении вверх.
Объединение жестов с GestureHandlerRootView
Для правильной работы react-native-gesture-handler
рекомендуется обернуть ваше приложение в GestureHandlerRootView
. Вот пример, как это сделать:
import React from 'react';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import App from './App';
export default function Main() {
return (
<GestureHandlerRootView style={{ flex: 1 }}>
<App />
</GestureHandlerRootView>
);
}
Заключение
Библиотека react-native-gesture-handler
предоставляет мощные инструменты для управления жестами в приложениях на React Native. С ее помощью можно легко добавлять поддержку различных жестов и улучшать взаимодействие пользователя с приложением. Надеемся, что приведенные примеры помогут вам начать использовать эту библиотеку в ваших проектах.