如何使用React Native FlatList动画重新排序？

Question

我有一些看起来像这样的用户界面：

这些列表项可以是：（1）添加，（2）删除，（3）重新排序。

重新排序不拖放，但在点击支票/空圈图标时会发生 - 选中的项目始终位于列表顶部。

在React Native（here's one such example）的列表中添加/删除项目的动画示例很多。

但是我如何设置列表的顺序动画？特别是在我的情况下，它将是两个列表项交换位置。

我已经看过react-native-sortable-list和其他一些开源项目，但我认为这可能是过度的，因为我不需要拖放。此外，我已经挂钩了一些FlatList事件，如onLayout，onContentSizeChange和onScroll，所以我更喜欢一个允许我直接为FlatList的子项设置动画的解决方案。

Answer 1

平面列表按照您通过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。它将动画类型应用于渲染之间视图中的每个更改。

Answer 2

只是想补充Nth.gol的答案，这有助于我解决同一问题。

以简单的方式为列表设置动画：

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

2. 在状态更新上方添加以下行：

   LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);

3. 为确保动画也可以在Andriod上正常运行，请在构造函数之外添加以下代码：

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

注意：您需要从LayoutAnimation导入UIManager && react-native

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