とがみんブログ
就活中、自己分析にハマり、心理学、脳科学の本を読み漁りつつ哲学チックなことをひたすら考えていました。このブログでは、そんなとがみんの考えや経験を綴っていきます。
React Native

【React Native】ドロワーナビゲーションの実装方法

どうも、アンドロイド用ブログ管理アプリ「Feedmin」を開発すべく、React Nativeについて勉強中のとがみんです。

調べたこと、勉強したことのアウトプットをこのブログでもしていきます。

この記事では、ドロワーメニューの実装方法について紹介していきます。

サンプルアプリ

スポンサードリンク

実装方法

上記サンプルアプリの実装方法について説明していきます。

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

ターミナルで以下を実行し、必要なパッケージをインストールします。

ナビゲーションに関するパッケージ

アイコンの使用に関するパッケージ

Home画面の実装

新しくHomeScreen.jsというファイルを作成し、以下を記述します。

SideBar画面の実装

新しくSideBar.jsというファイルを作成し、以下を記述します。

ドロワーメニューの実装

App.jsに以下のように記述していきます。

まず、必要なライブラリをインポートします。

createDrawerNavigatorがドロワーナビゲーションを実装する上で必要になってくるライブラリです。

次に、上部ナビゲーションバーのついた、スクリーンのクラスを作成します。

navigationOptionsはcreateStackNavigatorが持つnavigationプロパティを受け取り、ナビゲーションバーのレイアウトや見た目を決定していきます。

Iconをタップした時に、サイドバーを表示するための処理も記述します。

最後にドロワー機能に関して、以下のように記述します。

contentComponentは、以下のようなプロパティを持ったコンポーネントです。ここに、ドロワーメニューで表示したいスクリーン(SideBar)を渡します。

SideBarには以下のようなプロパティが引き渡されています。

SideBarタグ中の「…」は、スプレッド演算子といい、複数の要素を引き渡す時に使用されます(詳しくは以下)。

>「…」←これ、ただの省略記号かと思ってました。(Spread operatorのお話)

これで、ドロワーメニューを表示されるはずです。

GitHub

今回作成したサンプルアプリのコードはGitHubにあげています。参考にしながら実装して見てください。

>https://github.com/togamin/ReactDrawerNav.git

まとめ

Drawer Navigationの実装方法について紹介しました。

何か不明点等あれば、ご指摘いただけると嬉しいです。

参考文献

>React Navigation入門〜Drawer Navigation(ドロワーナビゲーション)編

>ReactNativeのStackNavigatorとTabNavigatorとDrawerNavigatorを組み合わせる方法