React Native 动画回调答案

【问题标题】：React Native Animation CallbackReact Native 动画回调
【发布时间】：2019-03-02 03:09:27
【问题描述】：

我是原生反应新手，所以这个问题可能看起来微不足道。它更多地与将函数作为参数传递有关，我对胖箭头函数与将函数作为直接参数传递感到困惑。我正在为我的动画使用 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 以及可选的回调。我面临的问题是如何传递回调，因为它需要一个粗箭头函数作为参数传递。

我认为调用这个函数有多种方式（回调函数的传递方式都不同）。

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

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

【问题讨论】：

标签： javascript animation react-native callback

【解决方案1】：

我正在使用这样的动画：

回调在start() 参数内，带有arrow function

Animated.timing(this.state.xValue, {
            toValue: footerHeightPosition,
            duration: MILLISECOND_ANIMATION_DURATION,
            asing: Easing.back(),
        }).start(() => {
            //
            this.youCallbackFunc();
        });```

【讨论】：

【解决方案2】：

假设 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 })

【讨论】：

onAnimEndCallback 中的函数被立即调用。我刚刚做了 console.log 并提高了动画的持续时间，发现在调用 animateToFadeState 后立即登录 // do Something 被调用。

【解决方案3】：

在答案Karim's 的基础上，我只是在两端添加了粗箭头函数，并且在动画结束后调用回调中的函数。

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

【讨论】：