满足特定条件时如何在'onPanResponderMove'中停止对本地动画进行反应？

Question

我有一个悬停在视图上方的抽屉。用户可以垂直向上拖动以将其打开，而向下拖动以将其关闭。我的开合部分工作正常。我有一个问题是确保拖动动画一旦从手机屏幕顶部到达大约200像素就停止，并且也不要从屏幕底部拖动​​超过100像素。这是绝对元素，我用过Animated.ValueXY()。我知道我需要在onPanResponderMove: (e, gestureState) =>{}函数中停止动画。我尝试了stopAnimation，但似乎没有任何影响。

这是导致拖动发生的原因-

    onPanResponderMove: (e, gestureState) => {
      return Animated.event([null, {
        dy: this.state.drag.y,
      }])(e, gestureState)
    },

在用户可以拖动的视图上使用{...this.panResponder.panHandlers}来拖动整个抽屉。像手柄一样。

在我要拖动以响应拖动“手柄”的视图上，在样式中使用this.state.drag.getLayout()。

任何答复表示赞赏！

Answer 1

1st，您需要知道屏幕尺寸。从'react-native'导入{Dimensions}会为您提供

import { Dimensions } from 'react-native'

Dimensions.get('window').height;
Dimensions.get('window').width;
Dimensions.get('screen').height;
Dimensions.get('screen').width;

2nd）如果在'onPanResponderMove'中执行console.log（手势），您将看到类似这样的内容

{ 
   stateID: 0.04776943042437365,
   moveX: 140.58839416503906, //the pixel where the "finger" is at X
   moveY: 351.9721374511719, //the pixel where the "finger" is at Y
   x0: 89.08513641357422, //the pixel where finger touched first in X
   y0: 390.5161437988281, //the pixel where finger touched first in X
   dx: 51.503257751464844, //distance finger dragged X
   dy: -38.54400634765625, //distance finger dragged Y
   veJS:   dy: -38.54400634765625,
   vx: 0.0880593692555147,
   vy: 0.06345143037683823,
   numberActiveTouches: 1,
  _accountsForMovesUpTo: 7017915 
}

有了这些信息，您就可以像这样随意地进行限制：

//to start to drag only after a 10% drag threshold
const DRAG_THRESHOLD = Dimensions.get('screen').height* 0.1;

//to limit the drag on 80% of the screen height
const DRAG_LIMIT = Dimensions.get('screen').height* 0.8

onPanResponderMove: (e, gesture) => {
   console.log(gesture);

   //for THRESHOLDs
   if ( (Math.abs( gesture.dy ) > DRAG_THRESHOLD) && 
        (Math.abs( gesture.dy ) < DRAG_LIMIT ) )
   {
       return Animated.event([
           null, {dx: 0, dy: pan.y}
       ]) (e, gesture)
   }
 },

未测试此代码，但希望对您有所帮助。