在Stack Navigator中嵌套Tab Navigator时出现屏幕名称重复警告

AI 小北

2026-7-25

Stack Navigator嵌套Tab Navigator出现重复名称警告的问题解答

这不是预期行为，是屏幕名称冲突导致的导航系统校验警告。

问题原因

你的代码里存在两处同名的屏幕配置：

外层Stack Navigator中：<Stack.Screen name="Home" component={HomeTabs} />
内层Tab Navigator中：<Tab.Screen name="Home" component={Home} />

React Navigation会全局追踪所有注册的屏幕名称，嵌套结构下的同名会让导航路径（如Home > Home）出现歧义，因此抛出警告提示你排查。

修复方案

只需重命名其中一处的name属性，确保所有屏幕名称全局唯一即可。

方案1：修改外层Stack的屏幕名称

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        {/* 将name改为HomeTabsContainer */}
        <Stack.Screen name="HomeTabsContainer" component={HomeTabs} />
        <Stack.Screen name="Profile" component={EmptyScreen} />
        <Stack.Screen name="Settings" component={EmptyScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

方案2：修改内层Tab的屏幕名称

function HomeTabs() {
  return (
    <Tab.Navigator>
      {/* 将name改为HomeScreen */}
      <Tab.Screen name="HomeScreen" component={Home} />
      <Tab.Screen name="Feed" component={EmptyScreen} />
      <Tab.Screen name="Notifications" component={EmptyScreen} />
    </Tab.Navigator>
  );
}