Question

我有一个javascript问题，我不知道如何解决它。

在我的React Native应用程序中，我有一个panResponder，我正在使用这个钩子来调用Animated.event。

this.panResponder = PanResponder.create({
    /* ... some other methods ... */
    onPanResponderMove: Animated.event([null, { dx: this.state.x, dy: this.state.y }]),
});

虽然，我希望钩子是一个匿名函数，以便能够做其他一些事情。我尝试了一些不同的方式来使用匿名函数，但我不能让它工作。

this.panResponder = PanResponder.create({
    /* ... some other methods ... */
    onPanResponderMove: (event, gestureState) => {
        this.callSomething(); 
        return Animated.event([null, { /* I'm not sure what to pass here to map with gestureState... */ }]);
    },
});

我已阅读文档，但即便如此，我仍然不知道。

你可以帮帮我吗？

感谢。

更新

我终于做了类似的事情：

let valueY;
this.panResponder = PanResponder.create({
    /* ... some other methods ... */
    onPanResponderGrant: () => {
        valueY = this.state.y._value;
    },
    onPanResponderMove: (event, gestureState) => {
        this.callSomething();
        let panY = valueY + gestureState.dy;
        this.state.y.setValue({ y: panY });
    },
});

我认为这不是最好的方法......

Answer 1

事实是 Animated.event（...）实际上正在返回一个函数，所以要立即调用它，你必须做这样的事情：

this.panResponder = PanResponder.create({
  ...
  onPanResponderMove: (e, gestureState) => {
    // custom logic here
    ...

    Animated.event([null, {
      dx: this.state.pan.x,
      dy: this.state.pan.y,
    }])(e, gestureState); // <<--- INVOKING HERE!
  },
});

Answer 2

如果这对任何人都有用，我就会遇到同样的问题。我大概结束了：

let mover = Animated.event([ null, { dy: this.state.pan.y }]) ;
let repsponder = PanResponder.create({
    ....
    onPanResponderMove: (e, gesture) => {
        this.doSomething() ;
        return mover(e, gesture) ;
        },
    }) ;

重要的一点似乎是在 onPanResponderMove 代码之外调用 Animated.event 。请注意，在通常出现的示例中，代码是 onPanResponderMove：Animated.event（...），因此创建了一个 Animated.event 事物，但是如果你这样做了在 onPanResponderMove 代码中（如在alexmngn的第一次尝试中），在 onPanResponderMove 代码的每次调用中都会创建一个新东西（无论它是什么！）我猜是问题所在。

将匿名函数传递给onPanResponderMove

2 个答案: