React Native Stack Navigation条件渲染页面导航报错问题

报错的核心是导航器中未注册DashBoard屏幕。你原来的写法是根据user状态动态渲染不同的屏幕组，当登录成功后调用navigate('DashBoard')时，组件可能还没完成重新渲染，此时导航器里还没有加载DashBoard所在的屏幕组，导致导航器识别不到这个屏幕，抛出错误。

不要动态切换整个屏幕组，而是把所有屏幕都注册到导航器中，通过initialRouteName控制初始显示的页面，同时增加加载状态处理App启动时的用户信息读取过程。

1. 修改StackNavigator组件 #

const StackNavigator = () => {
  const { user, isLoading } = useContext(UserContext);

  // 处理App启动时的用户信息加载状态
  if (isLoading) {
    return <Loading />;
  }

  return (
    <Stack.Navigator
      // 根据用户状态设置初始路由
      initialRouteName={user ? "DashBoard" : "Landing"}
      screenOptions={{ headerShown: false }}
    >
      {/* 已登录可用的屏幕 */}
      <Stack.Screen name="DashBoard" component={DashBoard} />
      <Stack.Screen name="Modal" component={Modal} />
      <Stack.Screen name="Quiz" component={Quiz} />
      <Stack.Screen name="Summary" component={Summary} />
      <Stack.Screen name="Loading" component={Loading} />
      <Stack.Screen name="Notes" component={Notes} />
      <Stack.Screen name="EditProfile" component={EditProfile} />
      <Stack.Screen name="Profile" component={Profile} />
      <Stack.Screen name="Chatbot" component={Chatbot} />
      <Stack.Screen name="Home" component={Home} />

      {/* 未登录可用的屏幕 */}
      <Stack.Screen name="Login" component={Login} />
      <Stack.Screen name="VerifyOTP" component={VerifyOTP} />
      <Stack.Screen name="Landing" component={LandingPage} />
    </Stack.Navigator>
  );
};

export default StackNavigator;

2. 完善UserContext的状态管理 #

需要在上下文里维护isLoading状态，处理App启动时从本地存储读取用户信息的过程，避免初始user为undefined时的路由混乱：

import { createContext, useState, useEffect } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';

const UserContext = createContext();

export const UserProvider = ({ children }) => {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  // 启动时读取本地存储的用户信息
  useEffect(() => {
    const loadSavedUser = async () => {
      try {
        const savedUser = await AsyncStorage.getItem('user');
        if (savedUser) {
          setUser(JSON.parse(savedUser));
        }
      } catch (error) {
        console.error('读取用户信息失败:', error);
      } finally {
        setIsLoading(false);
      }
    };

    loadSavedUser();
  }, []);

  // 登录成功后保存用户信息到本地
  const handleLogin = async (userData) => {
    setUser(userData);
    await AsyncStorage.setItem('user', JSON.stringify(userData));
  };

  return (
    <UserContext.Provider value={{ user, handleLogin, isLoading }}>
      {children}
    </UserContext.Provider>
  );
};

3. 登录页的跳转逻辑 #

登录验证成功后，调用上下文的handleLogin方法更新用户状态，然后直接导航到DashBoard即可：

// Login组件示例
const Login = ({ navigation }) => {
  const { handleLogin } = useContext(UserContext);

  const handleSubmit = async () => {
    // 模拟登录验证逻辑
    const userData = await api.login(/* 账号密码等参数 */);
    // 更新用户状态并保存到本地
    await handleLogin(userData);
    // 导航到DashBoard
    navigation.navigate('DashBoard');
  };

  return (
    {/* 登录表单 */}
    <Button title="登录" onPress={handleSubmit} />
  );
};

这样修改后，所有屏幕都被导航器提前注册，不会出现找不到屏幕的报错；同时App启动时会先读取本地用户信息，加载完成后自动跳转到对应页面，满足“下次打开直接渲染DashBoard”的需求。

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