moxt

Just another Blog site

DrawerLayoutAndroidとNavigatorを組み合わせて使いたい

   

DrawerLayoutAndroidは『画面端をスワイプするとニュッと画面が出てくるアレ』を実現するコンポーネント。

DrawerLayoutAndroid単独の解説してる記事はちょくちょく見たけど、Navigatorと組み合わせてる例はgithub上にあげられたサンプルのリポジトリくらいしかなくてアレだったので整理がてらメモ。

組み合わせってのは、ドロワー内のViewをタップするとそれに対応したコンポーネントに切り替わるヤツね。
↓みたいな動き。

https://gyazo.com/15e6ea0a891d28923d3057e2bdde5f00DrawerLayoutAndroidとNavigatorの連携

基本的には下記のコードを見れば終わり。

react-native-material-design/demo-app

ここからメモ。

登場人物は3つのコンポーネント。

  • DrawerAndroid
  • NavigationView
  • Navigator

これらを次のように配置する。

DrawerLayoutAndroidにはNavigationViewを描画するためのメソッドrenderNavigationViewがある。
それからDrawerLayoutAndroidNavigatorを子として抱えてる。

これをもうちょっと具象化するとこんな感じ。

『NavigationViewで選択されたアイテム毎に指定されたコンポーネントを表示する』ための流れを整理したい。
こんな感じだろうか。

  • NavigationViewに『アイテムが選択されたことを通知するコールバック』をpropsとして与える
  • NavigationView内でアイテムが選択されたら親コンポーネントから受け取ったコールバックを発動
    • このとき、コールバックの引数としてrouteオブジェクトを与える
  • 受け取ったrouteオブジェクトをNavigatorに渡してコンポーネントを切り替える

NavigationViewという特別なコンポーネントがあるわけではないので、任意のコンポーネントを作る必要がある。
ここでは、MenuPaneというコンポーネントを作ってみる。

作りは質素で基本的にはTextを表示するだけのListView。
ちょっと変わってる点はNavigatorと連携するための細工が仕込まれてるくらい。

タップするとコールバックが呼び出されるようになってる。
で、親コンポーネント側では開いてるNavigationView(ドロワー)を閉じつつ、受け取ったrouteオブジェクトをNavigatorに渡してる。
あとはNavigatorのrenderSceneがよしなにやってくれるって感じっすね。。

 - ReactNative

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

  関連記事

no image
NavigatorExperimentalの実装例を雑に読む

こんなの書いてた。 でも、Facebook氏はNavigatorをメンテしないらしいわ。。 …

logo_og
ReactNativeで画面遷移するならNavigatorを使う

※Android寄りの内容 画面遷移は何かしらのGUIアプリを作る上で欠かせない。 …