React Nativeの
 ルーティングばなし
 20190618 hosomichi

自己紹介
 @jshosomichi 所属：Fringe81 仕事：フロントエンド開発、その他なんでも 趣味：てつがく 　　　えいが 　　　まんが 　　　

せんでん WEB+DB PRESSという雑誌で 「Elm」というWebフロントエンド開発言語の 記事を執筆しました。 とても素敵な言語なので良かったら 手にとってみてくださいませ 6/24(月) はつばいです。

ワタクシが作ってるアプリ、とルータ


ワタクシが業務で作っているアプリ
 仲間の活躍を投稿して、カジュアルにボーナ スを送り合うサービスです。 Twitterのようなタイムライン型のメインビュー をもち、タップやスワイプで異なる内容のタイ ムラインに遷移します。 モバイルアプリは初リリースから２年立ちまし た。入れ子タブになっていたり、細かいメ ニューなども表示します。

ルーティング手法について
 はじめはReactNativeのビルトイン コンポーネントである を使っていたんですが、v0.44で廃 止に いろいろ検討してみたものの、最終 的に公式Docが推奨しているReact Navigationを使うことにしました。

React Navigationを1.5年使った印象
 ● 嬉しかったこと ○ 環境構築が手軽で始めやすい ○ ドキュメントが充実している ○ 大概のことは安定した状態で実現できそうな安心感 ● しんどかったこと(最近改良されたものもありそう) ○ 下方互換性のない大幅な変更がけっこうあり、業務開発にインパクトがあった ○ 破壊的変更を避けようとしても、問題修正を取り込みたいのでアップデート避けられず ○ いま何枚目？もんだい (後述) ○ 高速タップすると二重遷移することがあり、要状態制御 ○ タブ固定したままスクリーン遷移させられなかった (うまく設計すれば出来たかも。。 ) ○ Androidだけスワイプジェスチャに対応していなかった (最近改善されていた )

いま何枚目？問題
 スクリーン4 スクリーン3 スクリーン2 スクリーン1 tweets tweets tweets tweets 各スクリーンで異なるtweetsなどの データを保持していくので、「現在の スクリーンのためのtweets」には `resources[screenLength].tweets` といった感じのコードでアクセスした いが、React Navigationでは screenLengthを取得することが出来 ない。

こんなルータがあればいいのになぁ
 ● 破壊的変更が少なく安定的で着実に進化する ● シンプルなつくり ● いま何枚目のスクリーンかがわかる

ないなら作ろうということで自分で作ってみました


アプリでもリリースしてみました
 Uniposにも組み込んでリリースしま した。 26,000アカウントが存在するので、 ルータ差し替え版のテストはかなり 慎重に行い、かなりドキドキのリリー スでしたが、4ヶ月ほど安定して動い てくれています

の設計


基本的な設計思想
 TabScreen GenericScreen １つの画面をScreenとし、 ふつうの特殊機能なしの画面を GenericScreen タブ機能付きの画面を TabScreenとしました。 現状はこの２種類だけ扱っています。 画面の遷移はシンプルなスタック構造としました。 pushで画面追加、popで画面削除、resetでスタック破棄です。 遷移アニメーションの縦方向、横方向は都度選べるようにしてみました。

難しかったタブスクリーン設計
 いろんな条件を全部クリアする必要アリ ● タブは入れ子にしたい (1タブスクリーンだけ入れ子可に ) ● タブはスワイプで遷移できるように ● タイムラインtoタイムライン遷移の際、下のタブは固定したい ● スクリーンによってはタブ内に改行が入るのでタブの高さを変動的に ● タブの変更があった際にはコールバック関数をコールしたい ● 非表示タブはアンマウントするかマウントしたままにするか選びたい ● スクリーンによってはタブは固定表示にせずスクロールで隠れるようにした い

サンプルコード(ルーティング設定)


サンプルコード(JSXエントリ)


サンプルコード(遷移メソッドのコール)


Routerインスタンスメソッド群
 今何枚目？問題の解決 遷移アニメーションの方向指定

動きっぷり紹介動画


のこれから

まだまだ整備が必要です ● ドキュメントやコメントの英語科対応 ● Exampleコードの充実 ● コントリビューションルールの策定 ● 汎用機能の追加 ○ スワイプバック ○ もっとネイティブ遷移のような見た目に ○ 1アプリ内で複数ルータを扱えるように

HPも作ろうと思っています ● アイデンティティをしっかり伝えたい ● 得たい知識を探しやすくしたい ● もっと見やすいAPIドキュメントを用意したい ● 見た目が無い/ショボいと自分があんまり使いたくない

せっかくなので皆で育てたい ● 使ってみてもらえると嬉しいです、フィードバックも歓迎です ● 皆様が抱えている遷移に関する課題を知りたいです ● プルリク大歓迎です ● 日本語OKです(というか、あんまり英語わかりません) ● オフライン/オンラインMTGいずれも歓迎です(DMいただければ！) ● Githubスターをつけていただけたら咽び泣きます

[Github] https://github.com/jshosomichi/react-native-zen-router [NPM] https://github.com/jshosomichi/react-native-zen-router [API Document] https://jshosomichi.github.io/react-native-zen-router/