Tab Navigatorでタブ切り替えを扱う
タブを利用する場合もStack Navigatorと使い方はほとんど同じです。まずはライブラリをインストールしましょう（リスト9）。
［リスト9］Tab Navigatorをインストール
$ npm install @react-navigation/bottom-tabs
次に、Stack Navigatorと同様にcreateBottomTabNavigatorでTabオブジェクトを生成します。その先はほとんど同じです（リスト10）。
［リスト10］
// 略
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
// 略
const Tab = createBottomTabNavigator();
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>
</NavigationContainer>
);
}
実行すると、図9の通りになります。
タブ切り替えが実装できました。
Drawer Navigatorでサイドメニューを扱う
ドロワー（サイドメニュー）を利用する場合もほとんど同じなので、詳細は割愛します。インストールするライブラリはリスト11の通りです。
［リスト11］Drawer Navigatorをインストール
$ npm install @react-navigation/drawer
設定方法もほぼ同じですが、useNavigation()フックの戻り値であるnavigationで使える関数が少し増え、主に次の3つが使えるようになります。
-
navigation.openDrawer()：サイドメニューを開く -
navigation.closeDrawer()：サイドメニューを閉じる -
navigation.toggleDrawer()：開閉状態をトグルする
これらを使うことで、ボタンを押すとサイドメニューが開く、といった動作が可能になります。
まとめ
多機能なアプリを作り上げるために必要不可欠な、画面遷移ライブラリを解説しました。次回は、ここまで学んだ内容を生かして、簡単なメモアプリを作ってみましょう。
