moxt

Just another Blog site

NavigatorExperimentalの実装例を雑に読む

      2016/05/29

こんなの書いてた。
でも、Facebook氏はNavigatorをメンテしないらしいわ。。
翻弄されてる感じが心地いいですね。

パッと見、NavigatorをFlux風に仕上げたモノって感じ。
F8AppでRedux使ってるし、NavigatorExperimentalは既存のNavigatorより理想な姿なのでしょう。

いきなり既存のNavigatorをNavigatorExperimentalに置き換えるのは情弱にとっては困難なので、小さい例で原理を学んでおきたい派。

dabit3/Navigator-Experimental-example

これを読む。

Flux,Reduxを知ってる人はすんなり理解できるはず。
Reduxでお馴染みのstate,reducer,actionが出てくる。

それぞれのオブジェクトの役目はこんな感じ

  • state(コード例だとnavState)が画面のスタックを唯一管理するオブジェクト
  • stateの中身を唯一操作するヤツがreducer(createReducerで作ってる関数)
  • reducerに対して何かしらの処理を依頼をするオブジェクトがaction

Stateを初期化

Stateで画面のスタックを管理するので、アプリ起動したときに開くべき画面の情報などの初期化が必要になる。

NavReducerにはcreateReducer(initialState)によって初期化されたReducerが渡されてる。

で、constructorの中でReducerに対してundefineと、空のActionである{}を渡してる。
createReducerの中身を見れば分かるが、undefineかつ{}を渡すとinitialStateが返ってくる。
つまり、navStateにinitialStateを渡してるってこと。

NavigationCardStackの初期化

このnavStateをViewスタック管理用のコンポーネントに渡す必要がある。
renderを見る。

このNavigationCardStackが旧Navigatorに変わるコンポーネントだ。

navigationStateとrenderSceneはisRequiredなので必ず何かしら渡さないとダメなんだけど、onNavigateは必須じゃないっぽい。
それからonNavigateの存在意義がよく分からない。

とりあえずrenderSceneに渡してるthis._renderSceneの処理を追ってみる。

const ComponentToRender = this._renderRoute(props.scene.navigationState.key)ってな感じでkeyに対応するコンポーネントを取り出して、それをScrollViewで包んで描画してますね。

ん、propsにsceneなんてなかったはず。

https://github.com/facebook/react-native/blob/master/Libraries/NavigationExperimental/NavigationAnimatedView.js#L202

NavigationCardStackが内包するNavigationAnimatedViewの中を見てみると、sceneを渡してる。

navStateへのインタラクション

ある画面から、別の画面への遷移はどうやって実現するのか。

_renderRouteで描画すべきコンポーネントを選出しながらonPressプロパティに_handleActionを渡している。
この_handleActionの中でnavStateへの処理を行ってる。

_handleActionを見てみる。

NavReducerに現在のnavStateと、与えられたactionを渡すことで新しい状態newStateを生成してる。
それから、newStateとnavStateを比較し、両者が違うもの(違う画面)であればnewStateをnavStateとして更新する。
これによって画面が切り替わるわけだ。

 - ReactNative

336px




336px




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

  関連記事