Question

我很难使用LayoutAnimation动画从ListView中删除行。

由于LayoutAnimation.spring预设动画使用弹簧处理视图更新并使用淡入淡出视图创建，我希望删除后底部现有行向上弹出。相反，它们会淡入。

使用RN 0.18.1

let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
var movies = [movie1, movie2, movie3, movie4, movie5];

...

renderRow(row) {
  return <MovieRow key={row.movieId} />
}

...

// immutable delete of element in reducer (redux)
movies = movies.slice(0, 2).concat(movies.slice(3));

...

LayoutAnimation.spring();
this.setState({
  dataSource: ds.cloneWithRows(movies)
});

Answer 1

最新的react-native已经支持删除动画。我做了类似的事情：

const CustomLayoutLinear = {
  duration: 300,
  create: {
    type: LayoutAnimation.Types.easeInEaseOut,
    property: LayoutAnimation.Properties.opacity
  },
  update: {
    type: LayoutAnimation.Types.easeInEaseOut
  },
  delete: {
    type: LayoutAnimation.Types.easeInEaseOut,
    property: LayoutAnimation.Properties.opacity
  }
};

只有创建或删除才能触发不透明度缓入。更新组件只需轻松并轻松。

然后在安装组件时挂钩customLayoutLinear

  LayoutAnimation.configureNext(CustomLayoutLinear);

Answer 2

看起来LayoutAnimation还不支持删除。

注意：LayoutAnimation适用于创建和更新布局事件。尚不支持删除。请注意，当删除圆圈时，没有动画。

请检查：https://medium.com/@Jpoliachik/react-native-s-layoutanimation-is-awesome-4a4d317afd3e#.9cdaqazay

修改现在支持删除：

Android ：0.28 release notes

iOS ：0.26 release notes

使用React Native LayoutAnimation动画化ListView行删除

2 个答案: