expoでBottomタブを特定の画面のみに表示させる方法

2023年9月24日 2023年9月26日

abyblog

Bottomタブメニューを特定の画面にのみ表示させたいときがあるかと思います。

例えば、ユーザーが最初に訪れる、アプリの説明画面などです。

そこには、アプリのタブメニューは表示させたくありません。

今回は、Bottomタブメニューを特定の画面にのみ表示させる方法を解説していきます。

Bottomタブの付け方を知らない人は、以下を参考にしてください。
【初心者向き】expoでBottomタブを追加する方法 - プロラブ (abyblog.online)

目次（クリックで読みたい部分にジャンプできます）

1 元のコード
2 特定の画面にのみBottomタブを表示させる
3 注意点
4 まとめ

元のコード

今回扱うコードは次のようなものです。

const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();

export default function App() {

  return (

    <NavigationContainer>

      <Tab.Navigator 
        initialRouteName="Login"
        screenOptions={{}}
      >
        <Tab.Screen name="MemoList" component={MemoListScreen} />
        <Tab.Screen name="MemoDetail" component={MemoDetailScreen} />
        <Tab.Screen name="MemoEdit" component={MemoEditScreen} />
        <Tab.Screen name="MemoCreate" component={MemoCreateScreen} />
      
      </Tab.Navigator>

    </NavigationContainer>
    
  );
}

現在は4つの全ての画面にBottomタブが適用されています。

特定の画面にのみBottomタブを表示させる

今回は、MemoListScreen MemoDetailScreen MemoEditScreen MemoCreateScreen の４つの画面のうちから、

MemoEditScreen と MemoCreateScreen にはBottomタブを表示させないようにしたいと思います。

Bottomタブを表示させない方法は、

Stack.Screen と Tab.Screen を組み合わせることで実現することができます。

//import 文

const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();

export default function App() {

  return (

    <NavigationContainer>

      <Stack.Navigator 
        initialRouteName="MemoList"
        screenOptions={{}}
      >
        <Stack.Screen name="MemoList" component={MemoListScreen} />
        <Stack.Screen name="MemoDetail" component={MemoDetailScreen} />
        <Stack.Screen name="HOME" component={HomeTabs} />//この中にBottomタブを含むスクリーンが入っている。
      
      </Stack.Navigator>

    </NavigationContainer>
    
  );
}

function HomeTabs() {
  const Tab = createBottomTabNavigator();

  return (
    <Tab.Navigator
      initialRouteName="MemoEdit"
    >
      <Tab.Screen name="MemoEdit" component={MemoEditScreen} />
      <Tab.Screen name="MemoCreate" component={MemoCreateScreen} />

    </Tab.Navigator>
  );
}

これで、Bottomタブを特定の画面にのみ表示させることができました。