reactjs - React Navigation 5，登录后阻止返回导航

Question

我在一个项目中使用 React Navigation 5，并且在尝试阻止用户在某个点之后导航回来时遇到了麻烦。

该应用程序使用类似于以下的嵌套导航结构:

ROOT (STACK)
|-- LoginScreens (STACK - options={{ gestureEnabled: false }} )
|   |-- Login (SCREEN) -> when successful navigate to "Home"
|   +-- Register (SCREEN) -> after registration, navigate to "Login"
|
+-- Home (TABS - options={{ gestureEnabled: false }} )
    |-- BlahBlah (SCREEN)
    |-- MyProfile (SCREEN)
    +-- Dashboard (TABS)
        |-- AllTasks (SCREEN)
        +-- SomethingElse (SCREEN)

用户登录成功后，用户被发送到 Home屏幕，并且应该无法导航回 LoginScreens屏幕。

我尝试使用 componentDidMount Home 上的生命周期方法，以及 useFocusEffect钩子(Hook)，带有以下内容:

对 React Native 的 BackHandler 进行回调, 从处理程序返回 true (true 表示已处理返回操作，不会调用更多返回处理程序)，但它也会阻止 Home 中屏幕内的任何返回导航(例如，我无法从 Dashboard 导航回 MyProfile)。

使用 navigation.reset({ index: 1, routes: [{ name: "Home" }] }) .没有 index: 1导航只是回到 ROOT 的初始路由(在本例中为 LoginScreens)。与 index: 1 , 一个 Maximum update depth exceeded抛出错误。

而是直接导航到 Home ，我尝试使用 navigation.reset() (注意:没有参数，清除整个导航历史)，然后导航到 Home屏幕。这并没有达到预期的效果，因为在导航到 LoginScreens 之前，当前路线(ROOT 的初始路线，在本例中为 Home)仍然被推送到导航历史记录中。 .

以不同的方式结合导航和重置调用，我只能设法让 JS 生气，并向我抛出错误和异常。

Aaaaand...我已经没有想法了。有没有人有什么建议 ？

Answer 1

似乎 React Navigation 的文档试图通过本指南涵盖此用例:

https://reactnavigation.org/docs/en/auth-flow.html

那里的例子非常棘手，已经介绍了状态管理库、reducers、React hooks 以及其他任何没有真正帮助的东西。但是，该指南的摘要是:Conditionally render routes .

Unlinke React Navigation 4 和以前的版本，在 React Navigation 5 中你可以有条件地渲染路线。这样一来，您就有效地排除了导航到不存在的路线的任何可能性。下面是一个非常简短的示例，说明如何使用简单的状态变量来实现。但是请记住，此示例仅考虑一次呈现一条路线的导航器。如果您有比本示例中的路线更多的路线，您可能需要调整 RootStack.Navigator的 Prop (例如 initialRouteName)，或显式导航到特定路线。

import React from "react";
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import LoginNav from "./screens/LoginNav";
import HomeScreens from "./screens/HomeScreens";

const RootStack = createStackNavigator();

export default class MyApp extends React.Component {
    constructor(props){
        super(props);

        this.state = { isLoggedIn: false };
    }

    setIsLoggedIn = (isLoggedIn)=>{ this.setState({ isLoggedIn }); }

    render = () => {
        // Using an arrow function to allow to pass setIsLoggedIn to LoginNav
        // Pass setIsLoggedIn from the props of LoginNav to the screens it contains
        // then from the screens call this function with a true/false param
        const LoginScreens = (props)=> <LoginNav {...props} setIsLoggedIn={this.setIsLoggedIn} />

        return <NavigationContainer style={{ flex: 1 }}>
            <RootStack.Navigator>
                {(this.state.isLoggedIn === false)
                    // If not logged in, the user will be shown this route
                    ? <RootStack.Screen name="LoginScreens" component={LoginScreens} />
                    // When logged in, the user will be shown this route
                    : <RootStack.Screen name="Home" component={HomeScreens} />
                }
            </RootStack.Navigator>
        </NavigationContainer>;
    }
}

在本例中，调用 (this.) props.setIsLoggedIn(true)渲染 Home路线，或调用 false参数返回到 LoginScreens路线。

希望这个例子比文档中的例子更容易理解。