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

Question

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

这些列表项可以：(1) 添加、(2) 删除、(3) 重新排序。

重新排序不是拖放，而是在单击选中/空圆圈图标时发生 - 选中的项目始终保留在列表的顶部。

在 React Native 中，有很多从列表中添加/删除项目的动画示例（这里是一个这样的示例）。

但是我怎样才能动画化列表的排序呢？具体来说，就我而言，这将是两个列表项交换位置。

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

Answer 1

Flatlist 按照您通过dataprop 提供的数组的顺序进行排序。无论您使用组件级状态（即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 中进行查看。它会将动画类型应用于渲染之间视图中的每个变化。