reactjs - Animate.spring 完成后调用函数

标签 reactjs react-native react-native-ios

我正在使用动画,以便弹出窗口从右侧进入。我为此使用以下代码 -

  var toValue = 200;

  if(this.state.fileMenu){
    toValue = 0;
  }

  Animated.spring(
    this.state.bounceValue,
    {
      toValue: toValue,
      velocity: 3,
      tension: 2,
      friction: 5,
    }
  ).start();
  //I want to call a function here after the animation is finished.

  this.setState({fileMenu: !this.state.fileMenu});

代码工作完美,看起来很棒,但是,我现在只想在动画完全完成时调用函数,并且严格只调用一次。只是想知道我该怎么做?不确定这是否是一个非常简单的问题。

最佳答案

start 接受一个回调函数,该函数在动画结束后执行一次:

 Animated.spring(
    this.state.bounceValue,
    {
      toValue: toValue,
      velocity: 3,
      tension: 2,
      friction: 5,
    }
  ).start(() => doSmething());

关于reactjs - Animate.spring 完成后调用函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43704237/

相关文章:

react-native - react native iOS 构建问题 - glog - 使用未声明的标识符 'SYS_gettid'

react-native - 使用 react-native-maps 和 use_frameworks 找不到 Pod 安装错误 `React/RCTView.h' 文件

reactjs - 数组数据的初始状态在Reducer中未定义

reactjs - Webflow 与 React 的集成

reactjs - ReactCSSTransition 动画对图像不流畅

react-native - 本地计划通知 native 响应

react-native - 使用 GDrive.files.list({)) 时找不到共享驱动器

react-native - 如何修复 NativeModule.RNLocalize 为空?

javascript - 条件渲染react-redux

javascript - 我无法使用使用 AsyncStorage 时收到的数据