将匿名函数传递给onPanResponderMove

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

虽然我不认为那是最好的方法...

- alexmngn

---

问题到底是什么？第二个版本中的语法看起来很好。有实际错误吗？函数没有被调用吗？“不能使其工作”太模糊了。 - rooftop

语法没有错误，但是当我尝试移动它时，它就不再移动了。 - alexmngn

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

- patotoma

---

天才！但愿我也能像您一样理解底层功能。运行得很好。 - Joshua Pinter

太棒了！对我非常有用。 - mostafa faryabi

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代码时创建一个新的东西（无论它是什么！）-我猜这就是问题所在。

- Mike Richardson

---

是的先生，这个问题让我困扰了一段时间。谢谢。 - Soheil