在Stack Navigators之间切换React Native Navigation V5

问题描述

对于具有自己的屏幕的用户，我有两个步骤：

1 。登录，注册和输入代码（确认）。

我有这3个屏幕作为Stack Navigator（代码将在下面）。

2 。主页，问题，类别。

这些屏幕位于不同的Stack Navigator中。

我想要的：

用户完成登录或注册过程后，他们将被发送到“主页”。我想切换堆栈导航器，以使用户无法“返回”到登录屏幕，并且也要清除堆栈。

我尝试过的事情：

我以前曾使用Redux来有条件地使用一个堆栈并在值更改后进行切换，这对于该功能来说似乎又需要太多工作。

我还尝试了嵌套导航器，这显然没有帮助。

这是我的StackNavigators.tsx文件，其中包含所有堆栈导航器：

const Stack = createStackNavigator();

const AuthStack = createStackNavigator();

export const AuthStackNavigator = () => {
    return (
        <NavigationContainer>
            <AuthStack.Navigator>
                <AuthStack.Screen name={"Login"} component={Login} options={{
                    headerTitle: "Login",headerStyle: {backgroundColor: "#eee"},headerTintColor: GlobalStyles.darkColor
                }}/>
                <AuthStack.Screen name={"Signup"} component={Signup} options={{
                    headerTitle: "Sign Up",headerTintColor: GlobalStyles.darkColor
                }}/>
                <AuthStack.Screen name={"EnterCode"} component={EnterMfaCode} options={{
                    headerTitle: "Enter Code",headerTintColor: GlobalStyles.darkColor
                }}/>
            </AuthStack.Navigator>
        </NavigationContainer>
    )
}

export const BaseNavigator = () => {
    return (
            <Stack.Navigator>
                <Stack.Screen name={"Home"} component={Home} options={{
                    headerTitle: "Education",headerTintColor: GlobalStyles.darkColor
                }}/>
                <Stack.Screen name={"Questions"} component={Questions} options={{
                    headerStyle: {backgroundColor: "#eee"},headerTintColor: GlobalStyles.darkColor,headerTitle: "",gestureEnabled: false,headerBackTitle: "Categories"
                }}/>
                <Stack.Screen name={"Categories"} component={Categories} options={{
                    headerStyle: {backgroundColor: "#eee"},headerBackTitle: "Start"
                }}/>
            </Stack.Navigator>
    );
};

如果对如何解决此问题做出解释，我将非常感谢。我很感激时间！

解决方法

我觉得使用Redux是一个很好且直接的解决方案。另一种选择是使用LocalStorage存储一些值，然后从那里获取它。

由于我希望在关闭应用程序后登录用户，因此我发现使用LocalStorage + Redux感觉是一个不错的解决方案。

您可以在本文档中进一步了解如何处理所有内容。 https://reactnavigation.org/docs/auth-flow