Tab Navigatorでタブ切り替えを扱う
タブを利用する場合もStack Navigatorと使い方はほとんど同じです。まずはライブラリをインストールしましょう(リスト9)。
$ npm install @react-navigation/bottom-tabs
次に、Stack Navigatorと同様にcreateBottomTabNavigator
でTabオブジェクトを生成します。その先はほとんど同じです(リスト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の通りになります。
![図9:タブ切り替えが実装できた](http://cz-cdn.shoeisha.jp/static/images/article/12150/12150_009.png)
タブ切り替えが実装できました。
Drawer Navigatorでサイドメニューを扱う
ドロワー(サイドメニュー)を利用する場合もほとんど同じなので、詳細は割愛します。インストールするライブラリはリスト11の通りです。
$ npm install @react-navigation/drawer
設定方法もほぼ同じですが、useNavigation()
フックの戻り値であるnavigation
で使える関数が少し増え、主に次の3つが使えるようになります。
-
navigation.openDrawer()
:サイドメニューを開く -
navigation.closeDrawer()
:サイドメニューを閉じる -
navigation.toggleDrawer()
:開閉状態をトグルする
これらを使うことで、ボタンを押すとサイドメニューが開く、といった動作が可能になります。
まとめ
多機能なアプリを作り上げるために必要不可欠な、画面遷移ライブラリを解説しました。次回は、ここまで学んだ内容を生かして、簡単なメモアプリを作ってみましょう。