React Navigation

Drawer Navigator

ドロワーメニューの定義

ドロワーを使う場合も画面定義の方法はスタックやタブとほぼ同じです。

import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator>
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Settings" component={SettingsScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

表示文字列はtitle、アイコンはdrawerIconで指定します（drawerIconはReact要素を返す関数を指定します）

        <Drawer.Screen name="Home" component={HomeScreen}
          options={{
            title: 'ホーム',
            drawerIcon: ({color, size}) => (
              <Ionicons name="ios-home" color={color} size={size} />
            )
          }}
        />

アプリの利用者にドロワーの存在を知らせるためには「左端をスワイプしてください」のような説明書を用意するのではなく、以下のようなハンバーガーメニューがあると直感的です。デフォルトではこのハンバーガーメニューが配置されるヘッダは非表示ですが、headerShownをtrueにすることで表示されるようになります。

      <Drawer.Navigator
        // 全部の画面でヘッダを表示する場合はscreenOptionsで指定する
        screenOptions={{
          headerShown: true
        }}
      >