隱藏特定螢幕中的分頁標籤欄

有時，我們可能想要隱藏堆疊導覽器中巢狀於分頁導覽器中的特定螢幕中的分頁標籤欄。假設我們有 5 個螢幕：Home、Feed、Notifications、

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 畫面，選單欄將不再顯示在畫面上了。