在特定屏幕中隐藏标签栏

有时我们可能想隐藏嵌套在选项卡导航器中的堆栈导航器中特定屏幕中的选项卡栏。假设我们有 5 个屏幕：Home、Feed、Notifications、Profile 和 Settings，你的导航结构如下所示：

¥Sometimes we may want to hide the tab bar in specific screens in a stack navigator nested in a tab navigator. Let's say we have 5 screens: Home, Feed, Notifications, Profile and Settings, and your navigation structure looks like this:

function HomeStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Profile" component={Profile} />
      <Stack.Screen name="Settings" component={Settings} />
    </Stack.Navigator>
  );
}

function App() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeStack} />
      <Tab.Screen name="Feed" component={Feed} />
      <Tab.Screen name="Notifications" component={Notifications} />
    </Tab.Navigator>
  );
}

通过这种结构，当我们导航到 Profile 或 Settings 屏幕时，选项卡栏仍将在这些屏幕上保持可见。

¥With this structure, when we navigate to the Profile or Settings screen, the tab bar will still stay visible over those screens.

但是，如果我们只想在 Home、Feed 和 Notifications 屏幕上显示选项卡栏，而不在 Profile 和 Settings 屏幕上显示选项卡栏，则需要更改导航结构。实现此目的的最简单方法是将选项卡导航器嵌套在堆栈的第一个屏幕内，而不是将堆栈嵌套在选项卡导航器内：

¥But if we want to show the tab bar only on the Home, Feed and Notifications screens, but not on the Profile and Settings screens, we'll need to change the navigation structure. The easiest way to achieve this is to nest the tab navigator inside the first screen of the stack instead of nesting stack inside tab navigator:

function HomeTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen name="Feed" component={Feed} />
      <Tab.Screen name="Notifications" component={Notifications} />
    </Tab.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeTabs} />
        <Stack.Screen name="Profile" component={Profile} />
        <Stack.Screen name="Settings" component={Settings} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

重新组织导航结构后，现在如果我们导航到 Profile 或 Settings 屏幕，标签栏将不再在屏幕上可见。

¥After re-organizing the navigation structure, now if we navigate to the Profile or Settings screens, the tab bar won't be visible over the screen anymore.