React Native动画结束后状态没更新怎么办？

志达 ☘︎ 提问于 2026-02-05 19:42:33 阅读 80

框架

我用Animated API做了一个位移动画，动画结束时想更新isDone状态显示完成提示，但发现状态一直没变。试过在Animated.timing的回调里调用setState和useEffect监听值变化都没反应，控制台也没报错，这是为什么？


<template>
  <button @click="animate">点击开始</button>
  <div :style="{ transform: <code>translateX(${x}px)</code> }">移动块</div>
  <p v-if="showDone">动画完成</p>
</template>

<script>
export default {
  data() {
    return {
      x: 0,
      showDone: false
    };
  },
  methods: {
    animate() {
      this.x = 200;
      setTimeout(() => {
        this.showDone = true; // 这里没生效
      }, 1000);
    }
  }
};
</script>

Redux

我来解答赞 4 收藏

反馈

2 条解答

长孙雅涵 Lv1

这个问题应该是动画和状态更新之间存在异步问题导致的。官方文档里说，动画执行是异步的，你用的 setTimeout 可能并没有真正等到动画结束。

在 React Native 里，Animated.timing 提供了一个回调接口，动画结束之后会触发。你可以在这个回调里更新状态。比如：

Animated.timing(this.x, {

  toValue: 200,

  duration: 1000,

  useNativeDriver: false

}).start(() => {

  this.setState({ showDone: true });

});

这样可以确保动画完成后再触发状态更新。另外如果你用的是函数组件和 useState，记得用 useEffect 来监听 x 的值变化，并在 x 变化后触发 showDone 的更新。setTimeout 这种硬编码延迟的方式不可靠，容易出问题。

还有个小建议，useNativeDriver 设置为 false 是为了避免动画结束后状态不同步的问题，如果设为 true，可能会遇到类似你描述的更新失效情况。

2026-02-07 12:54

宇文爱玲 Lv1

你这是用的Vue的语法啊兄弟，React Native的Animated回调里更新状态得用Animated.event或者回调函数，直接setState不触发更新的

试试这样改：
animate() {
Animated.timing(this.x, {
toValue: 200,
duration: 1000,
useNativeDriver: false
}).start(() => {
this.setState({ isDone: true });
});
}

showDone状态改成isDone，用setState更新，直接赋值不生效的，React状态更新得用setState

2026-02-05 19:44