代码之家 › 专栏 › 技术社区 › j_d

如何使用React Native FlatList设置重新排序动画?

react-native-flatlist react-native animation reactjs javascript

2

j_d · 技术社区 · 8 年前

我有一些UI如下所示:

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

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

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

但是,如何设置列表排序的动画?特别是在我的例子中,这将是两个列表项交换位置。

我看到了 react-native-sortable-list 还有一些其他的开源项目,但我认为这可能是过分的请勿需要拖放。此外,我已经开始参与一些固定的活动,如 onLayout ,则, onContentSizeChange 和 onScroll ,因此我更喜欢一种解决方案,它允许我直接为平面列表的子对象设置动画。

2 回复 | 直到 8 年前

1

4

Nth.gol 8 年前

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

2

Nate Lohn 5 年前

只是想加上N。gol的回答帮助我解决了同样的问题。

要以简单的方式设置列表的动画,请执行以下操作:

将列表的状态更新为要设置动画的新状态
在状态更新上方添加此行:

LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
要确保动画也在Andriod上工作,请在构造函数之外添加此代码:

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

注意:您需要导入 LayoutAnimation && UIManager 从…起 react-native

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