使用 React Native LayoutAnimation 动画 ListView 行删除

Posted 2023-03-15

【中文标题】使用 React Native LayoutAnimation 动画 ListView 行删除

【英文标题】：Animating ListView row deletions with React Native LayoutAnimation

【发布时间】：2016-02-02 14:04:45

【问题描述】：

我在使用 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)
);

【参考方案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);

【参考方案2】：

LayoutAnimation 好像还不支持删除。

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

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

编辑： 现在支持删除：

Android：0.28 release notes

iOS：0.26 release notes

【讨论】：

现在看来可以了！ github.com/facebook/react-native/pull/6779（但我还没能测试它..）

似乎支持删除，但我似乎无法使其工作。任何人是如何做到这一点的？