使用React Navigation的useNavigation钩子跳转报错：找不到Home页面

核心问题 #

你遇到的Do you have a screen named 'Home'?错误，本质是调用navigate("Home")时，该屏幕还未被注册到导航栈中。

你的路由配置存在逻辑缺陷：当!wasInitiated为true时，Stack.Navigator里仅渲染Login屏幕，Home屏幕完全未挂载。此时在Login页面调用导航到Home，导航系统找不到对应屏幕定义，自然抛出错误。

同时还有两处细节问题：

• React状态更新是异步的，即使登录成功后更新wasInitiated相关状态，立刻导航的话组件还未完成重新渲染，Home屏幕仍未注册。
• AsyncStorage.setItem是异步操作，未加await可能导致用户信息还未存储完成就跳转。

修复步骤 #

1. 修正路由配置（推荐方案）

将所有屏幕都注册到Stack.Navigator中，用initialRouteName控制初始显示页面，而非通过条件渲染只加载部分屏幕：

<NavigationContainer>
  <QueryClientProvider client={queryClient} contextSharing={true}>
    <Stack.Navigator 
      initialRouteName={!wasInitiated ? "Login" : "Home"}
    >
      {/* 始终注册Login屏幕 */}
      <Stack.Screen
        name="Login"
        component={LoginScreen}
        options={{ headerShown: false }}
      />
      {/* 始终注册Home屏幕 */}
      <Stack.Screen
        name="Home"
        component={Root}
        options={{ headerShown: false }}
      />
    </Stack.Navigator>
  </QueryClientProvider>
</NavigationContainer>

这样无论wasInitiated状态如何，两个屏幕都在导航栈中完成注册，调用navigate("Home")时就能找到对应屏幕。

2. 完善登录逻辑

• 给AsyncStorage.setItem添加await，确保用户信息存储完成后再跳转。
• 修正setUserAttemptingToLogin的取值错误（原代码中response.userId应为response.user.id）。

修改后的登录代码：

const login = async (username, password, e) => {
  e.preventDefault();
  console.log(username);
  console.log(password);
  
  let response = await loginStep1(username, password, setFailedAttempt);
  console.log("RESPONSE LOGIN: ", response);
  
  let userAuthObj = {
    auth: response.auth,
    userId: response.user.id,
    username: response.user.username,
    userRoleId: response.user.role.id,
    userRoleName: response.user.role.name,
  };
  // 等待存储完成
  await AsyncStorage.setItem("auth", JSON.stringify(userAuthObj));

  if (response.user.validUser) {
    setUserAttemptingToLogin({
      userId: response.user.id,
      username: response.user.username,
    });
    // 同步更新初始化状态（如果用它控制初始路由）
    // setWasInitiated(true);
  }

  navigate("Home");
};

3. 可选：登录后禁止返回Login页面

如果不希望用户从Home页面返回Login，可使用replace方法替换当前栈中的Login页面：

navigate.replace("Home");

内容的提问来源于stack exchange，提问作者Ara192