【ReactNative】Drawer Navigation(ver5.0)を使って画面遷移を実装
本記事の内容
  • Drawer Navigation(ver5.0)を使った画面遷移の方法

について解説していきます。

また、以下の記事で、他のNavigationを使った画面遷移の方法も紹介していますので、ぜひそちらもご覧ください。

Stack Navigation Tab Navigation

1. 概要

1.1 Drawer Navigation

Drawer(以下、ドロワー)とは、ジェスチャーで開閉できるナビゲーションドロワーです。
今回、ドロワーを実装するために、 createDrawerNavigatorコンポーネントを使って画面遷移を実装していきます。

公式ドキュメント: createDrawerNavigator

本記事を読むことでこのようなアプリを作ることができます。

2. DrawerNabigationの実装
(createDrawerNavigator)

2.1 パッケージのインストール

まず、ターミナルで以下のコマンドを実行してパッケージをインストールします。


また、今回ヘッダーも実装しますので、react-native-elementsライブラリもインストールしておきます。以下のコマンドを実行します。

2.2. ソースコード

フォルダ構成
今回のプログラムのフォルダ構成は、以下になっています。

App.js

  • @react-navigation/drawerをインポートする。
  • Drawer.Screenにドロワーメニューとして表示させたい画面を設定する。
  • ドロワーメニューのカスタマイズ。
<Drawer.Navigator>コンポーネントについて解説
<Drawer.Navigator>コンポーネントのプロパティ
initialRouteName ナビゲーターのデフォルト画面を設定します。
drawerType(※1) 引き出しの外観とアニメーションのタイプを設定します。
タイプの種類は、以下の表に記載。
drawerStyle ドロワーコンポーネントのスタイルオブジェクト。ドロワーメニューの背景色や幅を設定できる。
drawerContentOptions(※2) ドロワーメニューのスタイルをカスタマイズ。詳しくは、以下の表を記載。

drawerType(※1)
front ドロワーメニューが画面の前に表示されます。
back ドロワーメニューが画面の後ろに表示されます。
画面は、スワイプされた方にズレます。
slide 画面と引き出しの両方をスワイプすると、引き出しが表示されます。
(backと動作として同じ?)
permanent 永続的にドロワーメニューがサイドバーとして表示されます。

drawerContentOptions(※2)
activeTintColor ドロワー内で選択中の「アイコン」と「ラベル」の色を設定。
activeBackgroundColor ドロワー内で選択中の「背景色」を設定。
inactiveTintColor ドロワー内で非選択中の「アイコン」と「ラベル」の色を設定
itemStyle ドロワーメニュー同士の間隔などを設定
labelStyle ドロワーメニューのラベルのスタイル(フォントサイズなど)を設定
<Drawer.Screenコンポーネント>について解説
<Drawer.Screen>コンポーネントのプロパティ
name, component コンポーネント名
options ドロワーメニュー項目のオプション設定。詳しくは、以下の表を確認
options
drawerLabel ドロワーメニューに表示される文字列
drawerIcon 文字列の横に表示されるアイコン
gestureEnabled “false”を設定することで、ドロワーメニューをスワイプで開閉できなくする。

もっと細かく設定したいと言う方は、下記のドキュメントを参照してください。
公式ドキュメント: createDrawerNavigator

component/HomeScreen.js

  • デフォルト画面
  • react-native-elementsライブラリのHeaderコンポーネントを実装
  • Headerのアイコンをタップした時にドロワーメニューを表示
Header
HeaderのleftComponentにアイコンをタップ時にドロワーメニューを表示させるように実装する。
navigation.openDrawer() を設定することで、タップ時にドロワーメニューを表示することができる。


component/SecondScreen.js

component/ThidScreen.js

3. まとめ

今回は、createDrawerNavigatorについて解説しました。
ドロワーメニューを使って画面遷移したいと言う方には、おすすめのライブラリになっています。