react-native - 如何在满足特定条件时停止 'onPanResponderMove' 内的原生动画？

Question

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

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

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

在用户可以拖动的 View 上使用{...this.panResponder.panHandlers} 来拖动整个抽屉。像一个 Handlebars 。

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

欢迎任何回复!

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( 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 
}

3rd) 有了这些信息，你就可以像这样操纵、限制，就像这样:

//...
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)
   }
 },

希望对你有所帮助。保持冷静和快乐的编码!