react-native - 受保护的路线 - 我如何在我需要从受保护的屏幕路由到不受保护的屏幕的地方构建signOut

Question

我正在尝试使用本教程构建受保护的路由器/身份验证流。https://reactnavigation.org/docs/auth-flow/

我的身份验证流程渲染函数如下所示：

    render() {
        const Stack = createStackNavigator();
        return (
            <>
                {this.state.loading ?
                    <>
                        <View><Text>Loading</Text></View>
                    </>
                    :
                    < >
                        <Stack.Navigator>
                            {this.state.authenticated ?
                                <>
                                    <Stack.Screen name="Home" component={Home} />
                                    <Stack.Screen name="SignOut" component={SignOut} />
                                </>
                                :
                                <>
                                    <Stack.Screen name="Register" component={Register} />
                                    <Stack.Screen name="Login" component={Login} />
                                </>
                            }
                        </Stack.Navigator>
                    </>
                }

            </>


        )
    }

当我登录并想退出时，如何导航回注册或登录屏幕？基于这个流程，他们两个都不会在我的导航堆栈中，因为我已经通过了身份验证。

如果我尝试这样做，我会从我的登出屏幕上收到由于上述原因的错误。我该如何解决这个问题？

<Button
     title="Go to Register"
     onPress={() => navigate('Register')} //ERROR DUE TO SCREEN NOT FOUND 
 />

标签： react-nativereact-native-navigationreact-navigation-v5

Answer 1

鉴于您的身份验证解决方案（从 移动Register / Login到Home / Sign Out），请尝试使用相同的方法退出：将authenticated状态切换为false。这将导致您的导航器删除HomeandSign Out屏幕并呈现Registerand Login。