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

使用LayoutAnimation动画从ListView删除一行的动画有困难。使用React Native动画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) 
});

来源

2016-02-02 talkol

好像LayoutAnimation不支持删除呢。

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

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

编辑： 删除，现在支持：

的Android：0.28 release notes

的iOS：0.26 release notes

来源

2016-05-18 06:26:02 Swordsman

似乎现在这样当钩住customLayoutLinear！ https://github.com/facebook/react-native/pull/6779（但我还没有能够测试它呢..） – Tieme

删除似乎被支持，但我似乎无法使其工作。任何人如何得到这个工作？ – AndiDev

最新的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 
    } 
};

只有创建或删除将触发不透明缓出入和出。更新组件，只需轻松一下，轻松一下。

安装组件

LayoutAnimation.configureNext(CustomLayoutLinear);

来源

2017-09-19 07:11:28

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

回答

相关问题