Question

我正在开发一个我在其中使用Switch Navigator的react native程序。但我想知道如何为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)

Answer 1

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

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

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

“ createAnimatedSwitchNavigator”除动画外与createSwitchNavigator相同。因此它也没有后退功能。

Answer 2

应用 resetOnBlur：false

例如

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

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

如何为Switch Navigator设置后退按钮

2 个答案: