React Native Expo认证导航报错：NAVIGATE未被导航器处理

我用React Native和Expo开发应用，实现认证功能时遇到问题。App.js里有AppStack和AuthStack两个导航栈，通过三元运算符根据isAuthenticated状态渲染：已认证显示AppStack，未认证显示AuthStack，这部分功能正常。

但在AuthStack的Signin页面登录成功后，调用navigation.navigate("Home")想跳转到AppStack的Home页面时，抛出错误：

ERROR The action 'NAVIGATE' with payload {"name":"Home"} was not handled by any navigator.
Do you have a screen named 'Home'?
If you're trying to navigate to a screen in a nested navigator, see https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator.

This is a development-only warning and won't be shown in production

以下是App.js的代码：

const AppStack = () => {
    return (
      <>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Home} options={{headerStyle: {backgroundColor: "#000"}, headerTintColor: "white"}} />
        <Stack.Screen name="Forgot Password" component={ForgotPwd} options={{headerStyle: {backgroundColor: "#2a454e"}, headerTintColor: "white"}} />
        <Stack.Screen name="Check Your Inbox" component={ForgotPwdNext} options={{headerStyle: {backgroundColor: "#00dfc0"}, headerTintColor: "#3a5864"}} />
        <Stack.Screen name="Change Password" component={ChangePwd} options={{headerStyle: {backgroundColor: "#e5322b"}, headerTintColor: "white"}} />
      </Stack.Navigator>
    </>
      )
  }
  
  const AuthStack = () => {
    return (
      <>
        <Stack.Navigator>
          <Stack.Screen name="Welcome" component={Welcome} options={{headerStyle: {backgroundColor: "#1b4152"}, headerTintColor: "white"}} />
          <Stack.Screen name="Signin" component={Signin} options={{headerStyle: {backgroundColor: "#5549ab"}, headerTintColor: "white"}} />
          <Stack.Screen name="Signup" component={Signup} options={{headerStyle: {backgroundColor: "#26dec0"}, headerTintColor: "#35474f"}} />
          <Stack.Screen name="Verify Phone Number" component={VerifyPhone} options={{headerStyle: {backgroundColor: "#d268cc"}, headerTintColor: "white"}} />
          <Stack.Screen name="Logged Out" component={LoggedOut} options={{headerStyle: {backgroundColor: "#5a6e7f"}, headerTintColor: "white"}} />
       </Stack.Navigator>
      </>
      )
  }
  
  return (
    <NavigationContainer style={styles.root}>
      <StatusBar style="light" />
      {isAuthenticated ? <AppStack /> : <AuthStack />}
    </NavigationContainer>
  )
}

解决方案 #

核心原因 #

当isAuthenticated为false时，AppStack并未被渲染，AuthStack的导航器无法识别Home页面，直接调用navigate("Home")自然会失败。

解决方法 #

不需要手动导航到Home，而是更新isAuthenticated状态，让三元运算符自动切换到AppStack——因为Home是AppStack的第一个屏幕，会被默认渲染。

1. 在登录成功的逻辑中，将isAuthenticated设为true（可通过React State、Context或Redux等状态管理工具实现）。
2. 删除navigation.navigate("Home")的代码，状态更新后组件会重新渲染，自动显示AppStack的Home页面。

示例修改（React State版） #

如果你的认证状态是用组件内状态管理的：

// 在App组件内部定义状态
const [isAuthenticated, setIsAuthenticated] = useState(false);

// 登录成功后执行
setIsAuthenticated(true);

额外说明 #

如果需要向Home页面传递参数，可以在更新状态时保存参数，再通过Context或props传递给Home组件。

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