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

Question

我有一些 UI 看起来像这样：

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

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

在 React Native (here's one such example) 中有许多动画 adding/removing 列表项的例子。

但是我怎样才能使列表的排序动画化呢？特别是在我的例子中，这将是两个列表项交换位置。

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

Answer 1

平面列表按照您通过 data 属性提供给它的数组的顺序排序。无论您是使用 component-level 状态（即 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 过滤器函数应保留子集的原始排序顺序。

要对其进行动画处理，您可以在 React Native 中查看 LayoutAnimation。它会将动画类型应用于渲染之间视图中的每个更改。

Answer 2

只是想补充 Nth.gol 的回答，它帮助我解决了同样的问题。

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

将列表的状态更新为您希望动画化的新状态
在状态更新上方添加这一行：

LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
为确保动画在 Andriod 上也能正常工作，请在构造函数之外添加以下代码：

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

注意：您需要从 react-native

导入 LayoutAnimation && UIManager

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

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

How to animate reorder with React Native FlatList?

javascript

animation

reactjs

react-native

react-native-flatlist