Question

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

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

onPanResponderMove: (e, gestureState) =>{}

在用户可以拖动的视图上使用onPanResponderMove: (e, gestureState) => { return Animated.event([null, { dy: this.state.drag.y, }])(e, gestureState) },来拖动整个抽屉。像把手一样。

在要拖动以响应“手柄”的视图上使用样式{...this.panResponder.panHandlers}。

感谢您的答复！

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

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

满足特定条件时，如何停止在“ onPanResponderMove”内部反应原生动画？

1 个答案: