React Native中跨Stack Navigator从Login跳转至Profile的问题

为啥会报错？ #

你这两个Stack.Navigator是平级渲染的，Login页面的navigation对象只属于它所在的登录栈，根本感知不到另一个栈里的Profile页面，直接调用navigation.navigate('Profile')当然找不到目标，报错是必然的。

两种靠谱的解决思路 #

思路1：用根导航器嵌套两个栈 #

把登录栈和主栈都作为根导航器的子屏幕，通过先定位到目标栈，再跳转到具体页面。

修改后的代码示例：

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { useState } from 'react';

const Stack = createStackNavigator();

// 抽离主栈组件
const MainStack = () => (
  <Stack.Navigator initialRouteName={Routes.PROFILE} screenOptions={noHeader}>
    <Stack.Screen name={Routes.PROFILE} component={Profile} />
    <Stack.Screen name={Routes.HOME} component={Home} />
  </Stack.Navigator>
);

// 抽离登录栈组件
const AuthStack = () => (
  <Stack.Navigator initialRouteName={Routes.LOGIN} screenOptions={noHeader}>
    <Stack.Screen name={Routes.LOGIN} component={Login} />
    <Stack.Screen name={Routes.SIGNUP} component={Signup} />
  </Stack.Navigator>
);

// 根导航器，控制显示哪个栈
export default function AppNavigator() {
  // 用状态存储登录状态，实际项目可替换为redux/AsyncStorage
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{ headerShown: false }}>
        {isLoggedIn ? (
          <Stack.Screen name="MainStack" component={MainStack} />
        ) : (
          <Stack.Screen name="AuthStack" component={AuthStack} />
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Login组件内的跳转代码：

// 先跳转到主栈，再指定打开Profile页面
navigation.navigate('MainStack', { screen: Routes.PROFILE });

思路2：登录成功后直接切换根导航 #

如果登录后不需要返回登录页，直接在登录成功后替换整个根导航组件，这种方式更简洁直接。

代码示例：

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { useState } from 'react';

const Stack = createStackNavigator();

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  // 登录成功时触发状态切换
  const handleLoginSuccess = () => {
    setIsLoggedIn(true);
  };

  // 未登录时显示登录栈
  if (!isLoggedIn) {
    return (
      <NavigationContainer>
        <Stack.Navigator initialRouteName={Routes.LOGIN} screenOptions={noHeader}>
          <Stack.Screen name={Routes.LOGIN} component={() => <Login onLogin={handleLoginSuccess} />} />
          <Stack.Screen name={Routes.SIGNUP} component={Signup} />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }

  // 登录成功后显示主栈
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName={Routes.PROFILE} screenOptions={noHeader}>
        <Stack.Screen name={Routes.PROFILE} component={Profile} />
        <Stack.Screen name={Routes.HOME} component={Home} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

说明：

这种方式下，登录成功后页面会直接切换到主栈的初始页面（即Profile），无需额外编写跳转代码。

注意事项 #

• 确保Routes常量的命名和屏幕的name属性完全一致，避免拼写错误。
• 思路1中，根导航器给两个栈定义的名称（如"MainStack"）要和跳转时的第一个参数对应。

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