React Navigation报错：是否存在名为'home'的屏幕？求解决方案

问题原因 #

你的home屏幕是注册在TabRoutes（底部导航）内部的子屏幕，而LoginEnterVerificationCode所在的Auth栈与TabRoutes是根栈的同级屏幕。React Navigation中，跨栈无法直接跳转到嵌套导航的子屏幕，必须先定位到父导航节点，再导航到目标子屏幕。

解决方案 #

方法1：直接使用嵌套导航跳转语法 #

React Navigation支持直接指定父导航与子屏幕的嵌套跳转格式，无需修改路由配置，直接在LoginEnterVerificationCode中修改跳转代码：

// LoginEnterVerificationCode.js
navigation.navigate('tabroutes', { 
  screen: 'home', 
  params: { data: 你的数据 } 
});

该写法会先定位到根栈中的tabroutes屏幕，再自动导航到其内部的home子屏幕，并传递参数。

方法2：先跳转父导航，再内部定向（适合需要额外逻辑的场景） #

步骤1：修改LoginEnterVerificationCode的跳转代码

// LoginEnterVerificationCode.js
navigation.navigate('tabroutes', { 
  targetScreen: 'home', 
  data: 你的数据 
});

步骤2：在TabRoutes中监听参数并自动跳转

import * as React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Home from '../Screens/Main/Home/Home';
import Profile from '../Screens/Main/Profiles/Profile';

const Tab = createBottomTabNavigator();

export default function TabRoutes({ navigation, route }) {
  React.useEffect(() => {
    if (route.params?.targetScreen) {
      // 跳转到目标子屏幕
      navigation.navigate(route.params.targetScreen, route.params.data);
      // 清除参数，避免重复触发跳转
      navigation.setParams({ targetScreen: undefined });
    }
  }, [navigation, route.params]);

  return (
    <Tab.Navigator screenOptions={{headerShown:false}}>
      <Tab.Screen
          name='home'
          component={Home}
          options={{
              tabBarIcon: ({ focused }) => {
                  return <></>
              }
          }}
      />
      <Tab.Screen
          name='profile'
          component={Profile}
          options={{
              tabBarIcon: ({ focused }) => {
                  return <></>
              }
          }}
      />
    </Tab.Navigator>
  );
}

补充说明 #

你之前在AuthStack中直接注册home能正常跳转，是因为此时home是根栈的直接屏幕，与LoginEnterVerificationCode处于同一栈层级，因此可以直接匹配到。而当home嵌套在TabRoutes内部时，它属于二级导航节点，必须通过父导航tabroutes来访问。

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