listview - 使用 React Native LayoutAnimation 动画 ListView 行删除

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
  }
};

只有创建或删除才会触发不透明度缓入和缓出。更新组件只需做 easeIn 和 ease out。

然后在挂载组件的时候钩住customLayoutLinear

  LayoutAnimation.configureNext(CustomLayoutLinear);

Answer 2

看来 LayoutAnimation 还不支持删除。

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

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

编辑： 现在支持删除：

Android : 0.28 发行说明

iOS : 0.26 发行说明