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

Question

我有一些看起来像这样的 UI:

这些列表项可以:(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在 native react 中。它会将动画类型应用于渲染之间 View 中的每个更改。