Expo项目条件导航问题求助：登录后无法跳转至首页

问题根源 #

报错提示找不到名为Nav的导航器，说明你要么没在根导航器里注册对应的嵌套导航屏幕，要么跳转时的目标名称写错了，或者嵌套导航的跳转方式不符合规则。

分步解决 #

1. 修正导航结构 #

先确保根导航器（StackNavigator）正确包含登录页和嵌套的底部导航，示例结构如下：

// App.js
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import LoginScreen from './LoginScreen';
import HomeScreen from './HomeScreen';
// 按需导入其他底部导航页面

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

// 定义底部导航组件
function BottomNav() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      {/* 添加其他底部标签页 */}
    </Tab.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Login">
        <Stack.Screen 
          name="Login" 
          component={LoginScreen} 
          options={{ headerShown: false }} 
        />
        {/* 将底部导航作为根栈的一个屏幕，命名为MainTabs（名称需和跳转时一致） */}
        <Stack.Screen 
          name="MainTabs" 
          component={BottomNav} 
          options={{ headerShown: false }} 
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

2. 登录成功后的正确跳转 #

在LoginScreen里，完成登录验证和用户信息存储后，按嵌套导航的规则跳转到底部导航的Home页：

// LoginScreen.js
import AsyncStorage from '@react-native-async-storage/async-storage';

const handleLogin = async () => {
  // 模拟登录验证逻辑
  const userInfo = { id: 1, username: 'test_user' };
  
  // 存储用户信息到AsyncStorage（对象需转成字符串）
  await AsyncStorage.setItem('user', JSON.stringify(userInfo));
  
  // 跳转到底部导航容器，同时指定默认显示Home页
  navigation.navigate('MainTabs', { screen: 'Home' });
};

3. 启动时自动判断登录状态 #

如果要实现启动时根据存储的用户信息自动跳转，可在App.js中添加状态判断：

// App.js
import { useEffect, useState } from 'react';
import { ActivityIndicator } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

export default function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    checkLoginStatus();
  }, []);

  const checkLoginStatus = async () => {
    const storedUser = await AsyncStorage.getItem('user');
    setIsLoggedIn(!!storedUser);
    setLoading(false);
  };

  // 加载状态显示
  if (loading) {
    return <ActivityIndicator size="large" color="#0000ff" />;
  }

  return (
    <NavigationContainer>
      <Stack.Navigator 
        initialRouteName={isLoggedIn ? 'MainTabs' : 'Login'}
      >
        {/* 同之前的屏幕注册代码 */}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

关键注意点 #

• 导航屏幕的name属性必须和跳转时的名称完全一致，大小写敏感
• 嵌套导航跳转时，若要直接跳转到子导航内的页面，必须使用navigation.navigate('父导航屏幕名', { screen: '子页面名' })的格式
• AsyncStorage仅支持存储字符串，存储对象时需用JSON.stringify转换，读取时用JSON.parse还原

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