React Navigationで画面遷移を実現する

基礎からはじめるReact Native入門 第9回

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の通りになります。

図9：タブ切り替えが実装できた

　タブ切り替えが実装できました。

Drawer Navigatorでサイドメニューを扱う

　ドロワー（サイドメニュー）を利用する場合もほとんど同じなので、詳細は割愛します。インストールするライブラリはリスト11の通りです。

［リスト11］Drawer Navigatorをインストール

$ npm install @react-navigation/drawer

　設定方法もほぼ同じですが、useNavigation()フックの戻り値であるnavigationで使える関数が少し増え、主に次の3つが使えるようになります。

• navigation.openDrawer()：サイドメニューを開く
• navigation.closeDrawer()：サイドメニューを閉じる
• navigation.toggleDrawer()：開閉状態をトグルする

　これらを使うことで、ボタンを押すとサイドメニューが開く、といった動作が可能になります。

まとめ

　多機能なアプリを作り上げるために必要不可欠な、画面遷移ライブラリを解説しました。次回は、ここまで学んだ内容を生かして、簡単なメモアプリを作ってみましょう。