動畫發生時如何在React Native Animate.event上觸發方法？

Question

當您通過以下方式拖動組件時，React native具有創建動畫的有用方法：

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

但是，在拖動元素時，我希望它在拖動時調用一個函數。

我想做的是將項目拖到拖放區時，我想更改拖放區的背景色（因此，我需要一個函數調用來檢查它是否為拖放區）。

Answer 1

據我了解，您的問題需要在移動時獲取當前拖動的項目的位置。 我看到兩個選擇：

1. 假設變量_pan是Animated.ValueXY的實例，則可以添加偵聽器：

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

2. 如果您需要有關手勢的更多信息，則可以使用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
    }),
});

獲得必要的信息后，您可以在偵聽器中更改狀態。