如何去除Tab Navigator嵌套Stack Navigator后的冗余标题

出现标题冗余是因为Tab导航器的Screen名称和嵌套的Stack导航器的Screen名称被同时显示在顶部导航栏中，以下几种方法可以解决这个问题：

方法一：隐藏嵌套Stack的标题栏 #

如果不需要Stack导航器的顶部标题，直接在Stack的Screen配置中关闭标题显示：

const HomeStackScreen = () => (
  <HomeStack.Navigator>
    <HomeStack.Screen 
      name="Home" 
      component={HomeScreen} 
      options={{ headerShown: false }}
    />
  </HomeStack.Navigator>
)

const SearchStackScreen = () => (
  <SearchStack.Navigator>
    <SearchStack.Screen 
      name='Search' 
      component={SearchScreen} 
      options={{ headerShown: false }}
    />
  </SearchStack.Navigator>
)

这样顶部只会保留Tab导航器的标题（或自定义的顶部内容），不会显示Stack的标题。

方法二：统一设置顶部标题 #

如果需要顶部显示指定的单一标题，可以在Tab导航器的Screen中配置headerTitle，同时让Stack的标题与底部Tab标签保持一致：

// 嵌套Stack保持基础配置
const HomeStackScreen = () => (
  <HomeStack.Navigator>
    <HomeStack.Screen name="Home" component={HomeScreen} />
  </HomeStack.Navigator>
)

// Tab导航器中统一配置标题
<NavigationContainer>
  <Tabs.Navigator>
    <Tabs.Screen 
      name='HomeTab' 
      component={HomeStackScreen} 
      options={{ 
        title: 'Home', // 底部Tab标签显示的文字
        headerTitle: 'Home' // 顶部导航栏显示的文字
      }}
    />
    <Tabs.Screen 
      name='SearchTab' 
      component={SearchStackScreen}
      options={{ 
        title: 'Search',
        headerTitle: 'Search'
      }}
    />
  </Tabs.Navigator>
</NavigationContainer>

这种方式可以让顶部和底部的标题保持统一，避免冗余显示。

方法三：关闭整个Stack的导航栏 #

如果不需要Stack导航器的任何顶部导航元素，可以在Stack的Navigator组件中直接关闭头部：

const HomeStackScreen = () => (
  <HomeStack.Navigator headerMode="none">
    <HomeStack.Screen name="Home" component={HomeScreen} />
  </HomeStack.Navigator>
)

const SearchStackScreen = () => (
  <SearchStack.Navigator headerMode="none">
    <SearchStack.Screen name='Search' component={SearchScreen} />
  </SearchStack.Navigator>
)

这样Stack导航器不会生成顶部导航栏，只会显示Tab导航器的相关内容。

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