在React Native中更新状态时是否可以对视图进行动画处理

Question

我遇到无法使用scrollview或flatlist的情况。
当按下“下一步”时，UI是一种向导，我将用户移至下一屏幕或上一屏。 在渲染功能中，我有：

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

组件WizardItem具有button，其中包含更新this.props.currentStep，当在reducer中进行更新时，它自然会在此处更新。

但是我需要为过渡设置动画，例如当前步骤向左移动，新步骤从右移动，反之亦然。

如您所见，步骤是完全动态的，因此我无法将其加载到列表中，直到用户按下next按钮，我才知道。
但是我需要那个动画。

有人可以指导我如何实现这种效果，或者如果不可能的话，我应该停止考虑吗？

更新

波纹管就是类似的例子，只是没有旋转，只需左右移动即可。
但是我无法使用已预定义项目列表的视图，因为向导的下一步和上一步是动态的。

enter link description here

Answer 1

如果我正确理解，则希望将其转换到其他屏幕。为此，我建议您在React Native中使用LayoutAnimation。 LayoutAnimation使您可以对状态更改进行动画处理，而不是简单地消失和出现。您可以将currentStep而不是props保存为状态，并且每次状态更改时都使用LayoutAnimation以所需的方式进行过渡。

This article uses layout animation for screen transitions

如果您无法或不希望从道具更改为状态，则还可以在向导中检测道具的更改，然后使用“动画”来移动布局。

在不知道向导的安装方式或至少不了解其总体布局的情况下建议最佳方法是很棘手的。如果可以为向导共享一些代码，则对您的帮助会更容易。