如何为 Switch Navigator 设置返回按钮答案

【问题标题】：how to set up Back button for Switch Navigator如何为 Switch Navigator 设置返回按钮
【发布时间】：2019-10-17 15:31:22
【问题描述】：

我正在开发一个反应原生程序，我在其中使用 Switch Navigator。但我想知道如何为 Switch Navigator 设置后退按钮。我不想使用堆栈导航器。这是我的导航页面代码

            import createAnimatedSwitchNavigator from 'react-navigation-animated-switch';
            import {createAppContainer } from 'react-navigation';
            import { Transition } from 'react-native-reanimated';
            import React from 'react';

            import Login   from "./Login/Login";
            import SignUp  from './SignUp/SignUp';


            //====================================================

            //====================================================
            const Navigate = createAnimatedSwitchNavigator({


            Login:         {screen:Login},
            SignUp:        {screen:SignUp},

            },
            {
                transition: (
                <Transition.Together>
                    <Transition.Out
                    type="slide-left"
                    durationMs={200}
                    interpolation="easeIn"
                    />
                    <Transition.In type="fade" durationMs={300} />
                    </Transition.Together>
                ),
            }
            )

            export const AppContainer = createAppContainer(Navigate)

【问题讨论】：

您能否添加更多关于您尝试过的方法以及发生了什么或不起作用的信息？这有助于人们试图帮助你。

标签： android react-native button back navigator

【解决方案1】：

“SwitchNavigator 的目的是一次只显示一个屏幕。默认情况下，它不处理返回操作，并且在您切换离开时将路由重置为默认状态。这正是我们想要的行为身份验证流程。”

来自 React Navigation 文档：https://reactnavigation.org/docs/en/switch-navigator.html

SwitchNavigator 旨在处理身份验证（登录、注销和注册）。离开身份验证屏幕后，您不希望用户跳回该屏幕。所以 SwitchNavigator 删除了该功能。如果您想要后退按钮或功能，请使用除 SwitchNavigator 之外的任何导航器。

"createAnimatedSwitchNavigator" 与 createSwitchNavigator 相同，但动画除外。所以它也没有后退功能。

【讨论】：

【解决方案2】：

申请 resetOnBlur:false

例如

const App = createSwitchNavigator({
AppTabNavigator:AppTabNavigator,
  RootStack:RootStack,
},{
  initialRouteName:'AppTabNavigator',
  resetOnBlur:false,
  backBehavior:'history'
})

此外，请检查：https://reactnavigation.org/docs/en/switch-navigator.html

【讨论】：