当满足特定条件时，如何在“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

1）你需要知道屏幕尺寸..从'react-native'导入{维度}会给你

import { Dimensions } from 'react-native'

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

2) 如果你在 'onPanResponderMove' 里面做一个 console.log(gestures)，你会看到这样的

{ 
   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 Y
   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 
}

3) 有了这些信息，您可以随意操作、限制，如下所示：

//...
const [pan, setPan] = React.useState(new Animated.ValueXY());
//... 
//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)
   }
 },

我希望它有帮助。保持冷静和快乐编码！