在特定屏幕中隐藏标签栏

有时我们可能希望在嵌套在标签导航器中的堆栈导航器中的特定屏幕中隐藏标签栏。假设我们有 5 个屏幕：Home、Feed、Notifications、Profile 和 Settings，并且您的导航结构如下所示

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 屏幕时，标签栏仍将在这些屏幕上可见。

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

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屏幕，标签栏将不再在屏幕上可见。