Question

当您通过以下方式拖动组件时，React native有一种有用的方法来创建动画：

onPanResponderMove: Animated.event([
  null,                // raw event arg ignored
  {dx: this._pan.x, dy: this._pan.y},    // gestureState arg
]),

但是，当元素拖动时，我希望它在拖动时调用函数。

我要做的是当你将项目拖到放置区时，我想更改放置区背景颜色（因此我需要一个函数调用来检查它是否是放置区）。

Answer 1

据我了解您的问题，您需要在移动时获取当前拖动的项目位置。我看到两个选择：

假设变量_pan是Animated.ValueXY的实例，您可以添加监听器：

this._pan.addListener(v=> {
    console.log('listener', val) // listener Object {x: 0, y: -16.5} 
});

如果您需要有关手势的更多信息，可以使用Animated.event

let onMove = (e, gestureState) => {
        let {x0, y0, dx, dy, vx, vy} = gestureState;
        console.log(`x0:${x0}, y0:${y0}, dx:${dx}, dy:${dy}`); //x0:185.5, y0:309.5, dx:-1, dy:-12.5
        if (someFunctionThatComparesCoordinates(gestureState, dropzoneCoordinates)) {
            this.setState({
                dropzoneColor:'tomato'
            });
        }
        else {
            this.setState({
                dropzoneColor:'grey'
            });
        }
    };

PanResponder.create({
   onPanResponderMove: Animated.event([
      null,                // raw event arg ignored
      {dx: this._pan.x, dy: this._pan.y},    // gestureState arg
    ],{
        listener:onMove
    }),
});

获得必要信息后，您可以更改监听器中的状态。

如何在动画发生时触发React Native Animate.event上的方法？

1 个答案: