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

【问题标题】：How to animate reorder with React Native FlatList?如何使用 React Native FlatList 动画重新排序？
【发布时间】：2018-09-15 09:29:06
【问题描述】：

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

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

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

在 React Native (here's one such example) 中有许多动画添加/删除列表项的示例。

但是我怎样才能为列表的排序设置动画呢？特别是在我的情况下，这将是两个列表项交换位置。

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

【问题讨论】：

标签： javascript reactjs animation react-native react-native-flatlist

【解决方案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 过滤器函数应保留子集的原始排序顺序。

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

【讨论】：

是的，LayoutAnimation 最终解决了我的动画需求。
@IsaacHinman 你能解释一下你最终是如何让它工作的吗？当我使用 LayoutAnimation 时，会有一些动画（如果它们的宽度不同，它们会从窄到宽进行动画处理），但重新排序本身并没有动画。谢谢！
@willlma 这将完全取决于您的实现。密钥需要保持不变。发布您自己的 SO 问题。
@j_d 我相信他在问你是如何实现它的。因此，在我的意见中，回答您的具体实施是在这个问题的范围内。

【解决方案2】：

只是想添加到 Nth.gol 的答案中，它帮助我解决了同样的问题。

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

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

LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
为确保动画也适用于 Andriod，请在构造函数之外添加以下代码：

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

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

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

【讨论】：