屏幕方向滑动有绝招，React Native 带你实现

2023-12-13 18:19:10

屏幕中上下左右滑动实现某些特定操作

除了传统的点击指定区域或者按钮执行某些操作外，我们还可以通过检测用户在屏幕上的轨迹进行反馈。可以是坐标的具体位移，也可以是今天为大家分享的指定方向的滑动。

上、下、左、右的滑动有默认的方法，只要添加了方法边能够检测到同时进行我们想要的操作。

在OneClock的开发中，每个时钟均可通过不同方向的滑动实现相应功能，向上滑动退出时钟，向下滑动获取时钟详情页，向左滑动为上一时钟，向右滑动为下一时钟。

开始滑动：Touch 开始

当用户触碰屏幕开始滑动时，onTouchStart 方法被触发。然后我们可以获取用户在屏幕上的初始坐标点，为后续滑动方向检测做好准备。

// 获取用户手势动作的起始点坐标
  _touchStart(event) {
    this.startX = event.nativeEvent.locationX;
    this.startY = event.nativeEvent.locationY;
  }

滑动方向检测：Touch 结束

在手指离开屏幕之前，我们会一直收到 onTouchMove 事件，这时我们需要用实时收到的位置坐标与起始点坐标比较，来确定方向。

  _touchEnd(event) {
    const endX = event.nativeEvent.locationX;
    const endY = event.nativeEvent.locationY;
    // 计算滑动方向
    const direction = this._getDirection(this.startX, this.startY, endX, endY);
    // 根據滑动方向执行不同操作
    this._handleSwipe(direction);
  }

执行操作：Touch 结束

最后，在用户松开手指时，根据判断出的滑动方向来执行我们想要的操作。

  _handleSwipe(direction) {
    switch (direction) {
      case 'up':
        // 退出时钟
        this._exitClock();
        break;
      case 'down':
        // 获取时钟详情页
        this._getClockDetails();
        break;
      case 'left':
        // 上一时钟
        this._previousClock();
        break;
      case 'right':
        // 下一时钟
        this._nextClock();
        break;
    }
  }