React Native Gesture Handler 快速入门指南

前言

React Native Gesture Handler 是一个强大的手势处理库，它为 React Native 应用提供了高性能、原生级别的手势识别能力。相比 React Native 内置的手势系统，这个库能提供更流畅的交互体验和更丰富的手势类型。

本文将带你快速上手使用这个库，通过一个简单的拖拽小球示例，展示如何利用新版 API 实现手势交互。

准备工作

在开始之前，请确保你的项目中已经安装了两个必要的依赖：

1. react-native-gesture-handler - 提供手势识别功能
2. react-native-reanimated - 提供高性能动画支持

示例项目：可拖拽小球

我们将创建一个可以自由拖拽的小球应用，通过这个示例了解手势处理的基本流程。

第一步：定义样式

首先，我们需要为小球和容器定义基本的样式：

const styles = StyleSheet.create({
  ball: {
    width: 100,
    height: 100,
    borderRadius: 50,
    backgroundColor: 'blue',
    alignSelf: 'center',
  },
  container: {
    flex: 1,
  },
});

这里我们定义了一个圆形的小球样式和一个简单的容器样式。

第二步：创建小球组件

接下来，我们创建小球组件的基本结构：

function Ball() {
  return (
    <View style={styles.container}>
      <GestureDetector>
        <Animated.View style={[styles.ball]} />
      </GestureDetector>
    </View>
  );
}

注意我们使用了 GestureDetector 组件包裹 Animated.View，这是手势处理的关键结构。

第三步：设置动画值

为了实现拖拽动画，我们需要使用 Reanimated 的共享值来跟踪小球位置：

const x = useSharedValue(0);
const y = useSharedValue(0);
const start = useSharedValue({x: 0, y: 0});

const animatedStyle = useAnimatedStyle(() => {
  return {
    transform: [
      {translateX: x.value},
      {translateY: y.value},
    ],
  };
});

这里我们定义了三个共享值：

• x 和 y 分别跟踪小球的当前位置
• start 记录手势开始时小球的位置

第四步：应用动画样式

将动画样式应用到小球上：

<Animated.View style={[styles.ball, animatedStyle]} />

第五步：定义拖拽手势

最后，我们定义拖拽手势并绑定到检测器：

const panGesture = Gesture.Pan()
  .onBegin(() => {
    start.value = {x: x.value, y: y.value};
  })
  .onUpdate((e) => {
    x.value = start.value.x + e.translationX;
    y.value = start.value.y + e.translationY;
  });

return (
  <GestureDetector gesture={panGesture}>
    <Animated.View style={[styles.ball, animatedStyle]} />
  </GestureDetector>
);

手势定义包含两个关键回调：

• onBegin：记录手势开始时小球的位置
• onUpdate：根据手势移动更新小球位置

关键概念解析

1. GestureDetector：手势检测器组件，用于包裹需要响应手势的视图
2. 共享值(Shared Value)：Reanimated 提供的特殊值，可以在 UI 线程和 JS 线程间共享
3. 手势类型：库提供了多种预定义手势，如 Pan(拖拽)、Pinch(缩放)、Rotation(旋转)等

进阶提示

1. 你可以组合多个手势，实现更复杂的交互
2. 考虑添加范围限制，防止小球被拖出屏幕
3. 可以添加惯性效果，使小球在释放后继续滑动一段距离

结语

通过这个简单的示例，你已经掌握了 React Native Gesture Handler 的基本用法。这个库的强大之处在于它提供了原生级别的手势识别性能，同时保持了 React 开发的便捷性。在实际项目中，你可以根据需要组合不同的手势类型，创建丰富多样的交互体验。

希望这篇指南能帮助你快速上手 React Native Gesture Handler，开始构建更流畅、更自然的移动应用交互。