特定の画面でタブバーを非表示にする

スタックナビゲーターにネストされたタブナビゲーター内の特定の画面でタブバーを非表示にする場合があります。Home、Feed、Notifications、Profile、Settingsの5つの画面があり、ナビゲーション構造が次のようになる場合があります。

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画面に移動しても、タブバーが画面上に表示されなくなります。