如何使用React Native FlatList设置重新排序动画?

平面列表按照您通过 data 道具是否使用组件级状态(即。 this.state )或者redux来管理您的状态,您可以对元素数组重新排序,它应该按照该顺序重新排序。例如,一种实现可以是:

const checkedData = [...this.state.data].filter(item => item.checked === true);
const uncheckedData = [...this.state.data].filter(item => item.checked !== true);
const sortedData = checkData.concat(uncheckedData);
this.setState({ data: sortedData });

javascript过滤器函数应该保留子集的原始排序顺序。

要设置动画,您可以查看 LayoutAnimation 在react native中。它将在渲染之间对视图中的每个更改应用动画类型。

只是想加上N。gol的回答帮助我解决了同样的问题。

要以简单的方式设置列表的动画,请执行以下操作:

1. 将列表的状态更新为要设置动画的新状态

2. 在状态更新上方添加此行:

   LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);

3. 要确保动画也在Andriod上工作,请在构造函数之外添加此代码:

if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
    UIManager.setLayoutAnimationEnabledExperimental(true);
}

注意:您需要导入 LayoutAnimation && UIManager 从…起 react-native

有许多选项可用于配置持续时间;动画类型,但这是一个很好的&简单的工作解决方案。您可以在此处阅读有关配置选项的更多信息: LayoutAnimation