reactjs - react navigation v4 - 同一堆栈的不同过渡动画| 反应原生

Question

我正在尝试实现一些东西，这非常令人困惑。在我们的应用程序中，同一堆栈内的所有内容都有从左到右的转换，并且从不同的堆栈导航会导致从上到下的转换。

我假设我需要更改的堆栈示例：

const BackupNavigator = createStackNavigator({
    ZoomTutorial: ZoomTutorial,
    ZoomScanComplete: ZoomScanComplete,
    BackupSuccess: BackupSuccess,
}, 
{headerMode: 'none'});

流程是您进行面部扫描并显示成功屏幕。现在我添加了一个屏幕，您可以在其中验证您的备份。在 BackupSuccess 屏幕内。因此，我在此导航器堆栈中添加了一个新屏幕，但现在当我按下验证按钮时（返回 ZoomTutorial 屏幕，过渡是从右到左。它返回导航器中的一个屏幕。我希望它显示顶部到底部过渡。

这里的最佳做法是什么？我应该为此创建一个新堆栈吗？应用程序如何知道我在哪个堆栈中？有没有更简单的解决方案？我找不到根据屏幕定义过渡的方法。

标签： reactjsreact-nativereact-navigation

Answer 1

您可以navigationOptions为您想要动画的每个屏幕指定您想要的动画：

import { TransitionPresets } from 'react-navigation-stack';

// ...

static navigationOptions = {
  title: 'Profile',
  ...TransitionPresets.ModalSlideFromBottomIOS
}

https://reactnavigation.org/docs/en/stack-navigator.html#pre-made-configs