React Native Gesture Handler 使用教程

项目介绍

React Native Gesture Handler 是一个提供原生驱动的触摸和手势管理API的库，旨在为React Native构建最佳的基于触摸的体验。该库由Software Mansion开发，自2012年以来，Software Mansion一直是一家专注于构建Web和移动应用的软件机构。React Native Gesture Handler 通过声明式API暴露了平台的原生触摸和手势系统，使得手势不再由JavaScript响应系统控制，而是在UI线程中识别和跟踪。

项目快速启动

安装

首先，确保你已经安装了React Native CLI。然后，通过以下命令安装 react-native-gesture-handler：

npm install react-native-gesture-handler
# 或者使用 yarn
yarn add react-native-gesture-handler

链接

对于React Native 0.60及以上版本，自动链接会处理依赖关系。对于旧版本，需要手动链接：

react-native link react-native-gesture-handler

初始化

在你的应用入口文件（通常是 index.js 或 App.js）中，导入并初始化 react-native-gesture-handler：

import 'react-native-gesture-handler';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

应用案例和最佳实践

基本手势识别

使用 TapGestureHandler 实现一个简单的点击手势：

import React from 'react';
import { TapGestureHandler, State } from 'react-native-gesture-handler';
import { View, Text } from 'react-native';

const TapExample = () => {
  const onHandlerStateChange = event => {
    if (event.nativeEvent.state === State.END) {
      alert('Tap!');
    }
  };

  return (
    <TapGestureHandler onHandlerStateChange={onHandlerStateChange}>
      <View style={{ width: 100, height: 100, backgroundColor: 'blue' }}>
        <Text style={{ color: 'white' }}>Tap Me</Text>
      </View>
    </TapGestureHandler>
  );
};

export default TapExample;

滑动菜单

结合 PanGestureHandler 和 Animated 实现一个滑动菜单：

import React, { useRef } from 'react';
import { PanGestureHandler, State } from 'react-native-gesture-handler';
import { Animated, View, StyleSheet } from 'react-native';

const SwipeMenu = () => {
  const translationX = useRef(new Animated.Value(0)).current;

  const onGestureEvent = Animated.event(
    [{ nativeEvent: { translationX } }],
    { useNativeDriver: true }
  );

  const onHandlerStateChange = event => {
    if (event.nativeEvent.state === State.END) {
      Animated.spring(translationX, {
        toValue: 0,
        useNativeDriver: true,
      }).start();
    }
  };

  return (
    <PanGestureHandler
      onGestureEvent={onGestureEvent}
      onHandlerStateChange={onHandlerStateChange}>
      <Animated.View style={[styles.menu, { transform: [{ translateX: translationX }] }]} />
    </PanGestureHandler>
  );
};

const styles = StyleSheet.create({
  menu: {
    width: 200,
    height: '100%',
    backgroundColor: 'red',
  },
});

export default SwipeMenu;

典型生态项目

React Navigation

React Navigation 是一个流行的导航库，与 react-native-gesture-handler 结合使用，可以提供流畅的导航手势，如滑动