moxt

Just another Blog site

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

   

※Android寄りの内容

画面遷移は何かしらのGUIアプリを作る上で欠かせない。

『◯◯を押したら、詳細画面へ遷移する』とか…
『ユーザが◯◯な状態になったら、ベータ版の新機能を紹介する画面へ遷移する』とか…
『バックボタン押したら、前の画面に遷移する』とか…

いろんな場面で使う。

AndroidではstartActivityで遷移先のクラス情報を含んだIntentを投げる。
iOSではStoryboardとか使ってイイカンジにやってる。しらんけど。

ReactNativeではNavigatorというコンポーネントを使って画面遷移を実現する。

NavigatorのドキュメントNavigatorの解説記事を読めば終わりだけど、使ったメモを書いておく。

Navigatorに対してrouteオブジェクトなるモノを与えることで画面遷移処理が実行される。
routeオブジェクトなんて仰々しく名前ついてるけど単なるオブジェクトです。

Navigatorはrouteオブジェクトを受け取ると、renderSceneを呼ぶ。
このrenderSceneの中でどんなコンポーネントを表示するかというハンドリングを行うわけ。

ListView上のあるアイテムをタップしたら詳細画面へ遷移する(素朴なやり方)

頻出ケースですね。

https://gyazo.com/c544dccde16c99c4f137d2241e7a5f03こんな感じ。

ルートとなるコンポーネントでNavigatorを描画する。
renderSceneで描画するコンポーネントを素朴に場合分け。(ここ画面増えてきたらカオスになるよね)
各コンポーネント内からnavigatorの処理を呼び出せるようにプロパティとして渡しておく。

ClipsList(ListViewを描画するコンポーネント)の一部を抜粋。
描画する各アイテム全体をタップ対象としたいので、ルートにTouchableHighlightを置く。
onPress_navigateDetailに処理を委譲する。
プロパティのNavigatorにルートオブジェクトをpushしてるだけ。
これでrenderSceneが呼び出されて、ClipsDetailが描画される。

Androidの場合、バックボタン押したら前の画面、上の例だとListに戻ってほしい。
が、戻ることなく、アプリが閉じる。。

Androidでバックボタン押したら前に表示してた画面へ遷移する

BackAndroidというコンポーネントを使って画面のスタックを操作する。
先述したNavigatorを描画するコンポーネント上でバックボタンのハンドリングをやってみる。

ライフサイクルに合わせてBackAndroidにリスナーをつけたり、消したりしてる。
下記の実装例では、グローバルな空間でBackAndroidへリスナーをつけて終わり。って感じだ。

https://github.com/iSimar/HackerNews-React-Native/blob/master/index.android.js

それからBackAndroidのハンドラ、上の例でいうところの_backButtonHandler内で自身のNavigatorを操作するためにrefで関連付けておく必要がある。
ここ、他に良い方法ないのかね。。

ListView上のあるアイテムをタップしたら詳細画面へ遷移する(少しスマートなやり方)

renderSceneの中でifだとswitchだの使って表示すべきコンポーネントを選択する、っていう素朴なやり方だと画面が増えてきたときに条件判定にまみれて困る。
条件判定を廃したやり方をメモしておく。

renderSceneを下記のように変更する。

routeオブジェクトに表示すべきコンポーネントの情報を突っ込んで、それを描画するって感じ。
これだとpushする側で適当なコンポーネントを詰めておけばいいのでrenderScene側で条件判定する必要ない。

pushする側のコード例は下記のとおり。

passPropsの中で定義したkey-valは、renderScene

...によって展開されて渡される。
なので、描画されてるコンポーネント内でpassPropsの存在は気にしなくて良い。普通にthis.props.clipとかイケる。
詳細はSpread Attributeを読めばOK。

Navigatorの拡張ライブラリ

exponentjs/ex-navigator

 - ReactNative

336px




336px




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

  関連記事