在 Stack Navigator 之间切换 React Native Navigation V5

Question

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

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

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

2。主页、问题、类别。

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

我想要什么：

当用户完成登录或注册过程时，他们将被发送到“主页”。我想切换 Stack Navigator，这样用户就不能“返回”到登录屏幕，同时也让 Stack 被清除。

我尝试过的：

我之前使用 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",
                    headerStyle: {backgroundColor: "#eee"},
                    headerTintColor: GlobalStyles.darkColor
                }}/>
                <AuthStack.Screen name={"EnterCode"} component={EnterMfaCode} options={{
                    headerTitle: "Enter Code",
                    headerStyle: {backgroundColor: "#eee"},
                    headerTintColor: GlobalStyles.darkColor
                }}/>
            </AuthStack.Navigator>
        </NavigationContainer>
    )
}

export const BaseNavigator = () => {
    return (
            <Stack.Navigator>
                <Stack.Screen name={"Home"} component={Home} options={{
                    headerTitle: "Education",
                    headerStyle: {backgroundColor: "#eee"},
                    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"},
                    headerTintColor: GlobalStyles.darkColor,
                    headerTitle: "",
                    headerBackTitle: "Start"
                }}/>
            </Stack.Navigator>
    );
};

如果能解释如何解决这个问题，我将不胜感激。我很珍惜时间！

Answer 1

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

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

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