我不明白 React 导航行为

Question

我在反应本机（打字稿）应用程序中有这个功能：

import { LoginProps } from '../types';

export const signOut = async (auth: Auth, nav: LoginProps['navigation'], setUser: any) => {
    try {
        await auth.signOut();
        nav.navigate('Login');
        setUser(null);
    } catch (error) {
        console.log(error);
    }
}

此功能按预期工作，但如果我评论或删除此行：

await auth.signOut();

，
我收到此错误：

The action 'NAVIGATE' with payload {"name":"Login"} was not handled by any navigator.

如果我尝试仅导航而不在函数中执行任何其他操作，也会发生同样的情况。
我不明白这两行是如何链接的以及为什么第一行对于第二行的工作是必要的......

我在测试要解决的问题时遇到了这个问题这篇文章。

这是我的类型：

export type RootStackParamList = {
    Home: undefined;
    Login: undefined;
    Register: undefined;
    Game: { roomId: string | null };
}

export type NavigationProps<T extends keyof RootStackParamList> = {
    navigation: StackNavigationProp<RootStackParamList, T>;
}

export type HomeProps = NavigationProps<'Home'>;
export type LoginProps = NavigationProps<'Login'>;
export type RegisterProps = NavigationProps<'Register'>;
export type GameProps = NavigationProps<'Game'>;

Answer 1

请看这里：https://reactnavigation.org/docs/auth-flow

我认为只有这一行才能导航到登录

await auth.signOut();

不是这一行：

nav.navigate('Login');

因为如果 auth = null，则

Navigator

自动选择

LoginScreen

。所以代码

nav.navigate('Login');

是多余的，你不需要它。

这就是为什么您无法通过注释此行来导航到

Login

await auth.signOut();

Answer 2

这是因为我的屏幕是这样定义的：

return (
    <NavigationContainer>
      <Stack.Navigator>
        {user ? (
          <>
            <Stack.Screen
              name="Home"
              component={Home}
              options={{ headerShown: false }}
            />
            <Stack.Screen
                name='Game'
                component={Game}
                options={{ headerShown: false }}
            />
          </>
        ) : (
          <>
            <Stack.Screen
              name='Login'
              component={Login}
              options={{ headerShown: false }}
            />
            <Stack.Screen
              name='Register'
              component={Register}
              options={{ headerShown: false }}
            />
          </>
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );

如您所见，变量

user

必须未定义才能定义登录屏幕，因此，如果用户已连接，则登录屏幕在上下文中保持未定义状态，因此不会由任何导航器处理。

---

编辑：
我在发帖后大约 5 分钟就找到了答案，但无法自动回复，因为太快了。
不幸的是我忘记稍后回到网上发布它......但我收到了来自@famfamfam的良好回复:)