是否可以在反应原生状态下更新状态时为视图设置动画

Question

我有一个场景，我不能使用scrollview或flatlist。 按下按钮是一种向导，然后按下我将用户移动到下一个屏幕或之前的屏幕。在渲染功能我有：

<View style={{flex: 1}}>
   <WizardItem data={this.props.currentStep} />
</View>

组件WizardItem有button更新this.props.currentStep，当它在reducer中更新时，它在这里自然更新。 但我需要动画转换，如当前步骤左转，新来自右，反之亦然。 正如你所看到的步骤是完全动态的，所以我不能在列表中加载它，因为我不知道，直到用户按下一个按钮什么是下一个项目。 但我需要那个动画。 有人可以指导我如何做到这个效果，或者如果不可能的话我应该停止思考它？

UPDATE 贝娄是类似的东西的例子，只是没有旋转简单的左右移动。 但我不能使用视图，其中我有预定义的项目列表作为下一个，向导中的上一步是动态的。

enter link description here

Answer 1

如果我理解正确，您希望转换到其他屏幕。为此，我建议您在React Native中使用LayoutAnimation。 LayoutAnimation允许您为状态更改设置动画，而不是简单地消失和显示。您可以将currentStep保存在状态而不是道具中，每次状态更改时都使用LayoutAnimation以您希望的方式进行转换。

This article uses layout animation for screen transitions

如果从道具中更改为状态是您无法做或不想做的事情，您还可以在向导中检测道具更改，然后使用动画来移动布局。

如果不知道Wizard是如何设置的，或者至少是它的总体布局，建议一种最好的方法是很棘手的。如果可以为Wizard分享一些代码，那么帮助你会更容易。