使用动画从ListView中删除项目

Question

我有一个带有自定义组件的ListView（它是一个可滑动的组件，因此滑动它显示删除按钮）。我想通过带有滑动动画的删除按钮从列表视图中删除该项目。

这是我的删除按钮onPress功能的代码：

deleteItemAndPassId = (id) => {
    Animated.timing(this.state.x, {
      toValue: -1000,
      duration: 2000,
    }).start();
    this.props.deleteItemWithId(id); // calls parent's delete item which deletes it from the data array
  } 

问题是项目被快速删除（在动画完成之前）并且listview数据源更新，之后动画完成，因此给我一个空行。虽然重新启动应用程序时布局恢复正常（因此删除项目时没有错误）。

所以任何人都可以告诉我如何同步动画和删除。提前致谢！

Answer 1

您应该能够将删除代码移动到动画的completion callback，这是.start()的第一个可选参数：

Animated.timing(this.state.x, {
  toValue: -1000,
  duration: 2000,
}).start(() => {
  this.props.deleteItemWithId(id);
});