动画回调在完成之前执行

Question

动画完成后执行函数时遇到问题。

我正在制作一个简单的 ToDo 应用程序，当用户想要删除任务时，我希望它消失，然后调用我的函数，该函数使用父组件中的setState将其完全删除。我尝试自己研究这个，但无济于事。所以问题是任务视图会立即消失，而不是等待动画完成。

deletePressed() {
Animated.timing(
this.state.fadeIn,
{
toValue: 0,
duration: 300,
}
).start(this.props.action());
}

这.道具.动作

deleteTask(name) {
const temp = this.state.tasks;
if (temp.includes(name)) {
const indx = temp.indexOf(name);
temp.splice(indx, 1);
this.setState({ tasks: temp });
}
}

Answer 1

你不是给出回调，而是调用函数本身，这就是为什么它在动画完成之前被执行的原因。这应该有效。

deletePressed() {
Animated.timing(
this.state.fadeIn,
{
toValue: 0,
duration: 300,
}
).start(this.props.action);
}

Answer 2

我认为这是因为您没有提供函数作为start()的回调，而是在执行.start(this.props.action());时提供函数的结果，因此它在定义函数时调用函数。

你应该像这样传递它：.start(this.props.action);或像这样.start(() => this.props.action());那么传递的是功能本身。