React Native 动画回调

Question

我是本地反应新手，所以这个问题可能看起来微不足道。它与将函数作为参数传递有更多关系，我对粗箭头函数与将函数作为直接参数传递感到困惑。我使用 Animated.View 来制作动画，并编写了一个用于动画值的通用函数，如下所示：

animateToFadeState(stateName, newStateValue, onAnimEndCallback) {
  const hasCallback = onAnimEndCallback !== undefined;
  Animated.timing(stateName, {
    toValue: newStateValue,
    duration: 3000
  }).start(
      hasCallback ? this.onAnimEndCallback() : null;
  );
}

在这里，您可以将 stateName 传递给 animate 和 newState 以及可选的回调。我面临的问题是如何传递回调，因为它需要一个粗箭头函数作为参数传递。

我认为有多种方法可以调用这个函数（所有方法的不同之处在于传递回调函数的方式）。

1. animateToFadeState(this.state.abc, 1, () => {this.myFunction()})
2. animateToFadeState(this.state.abc, 1, this.myFunction())
3. animateToFadeState(this.state.abc, 1, () => this.myFunction())
4. animateToFadeState(this.state.abc, 1, this.myFunction)

这些似乎都不起作用，因为我的回调在动画开始时立即被调用。我不太明白这里出了什么问题，也不确定传递函数与粗箭头函数之间的区别。

Answer 1

假设onAnimEndCallback不返回函数，您应该更改代码并传递函数引用而不是其调用结果。

另一件需要注意的事情是，不需要添加“this”关键字（this.onAnimEndCallback），因为 onAnimEndCallback 只是一个参数，而不是上下文的字段。

像这样的东西应该有效

animateToFadeState(stateName, newStateValue, onAnimEndCallback) {
  const hasCallback = (typeof onAnimEndCallback === "function");
  //invoke Animated.timing only if you have a valid function
  if(hasCallback){
      Animated.timing(stateName, {
      toValue: newStateValue,
      duration: 3000
    }).start(onAnimEndCallback);
    );
  }

}

animateToFadeState(this.state.abc, 1, () => { //do something })