Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React_Nativeの_ルーティングばなし.pdf
Search
hosomichi
June 18, 2019
Technology
0
2.3k
React_Nativeの_ルーティングばなし.pdf
hosomichi
June 18, 2019
Tweet
Share
More Decks by hosomichi
See All by hosomichi
Firebaseをフル活用したサーバーエンジニアレス新規事業プロトタイピング
hosomichi
1
2.5k
Elm is a good teacher
hosomichi
2
1.4k
改善React道
hosomichi
3
1.1k
ReactComponentのコンストラクタを追いかけて
hosomichi
8
3.7k
Other Decks in Technology
See All in Technology
【Oracle Cloud ウェビナー】クラウド導入に「専用クラウド」という選択肢、Oracle AlloyとOCI Dedicated Region とは
oracle4engineer
PRO
3
110
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
2
5.5k
Where will it converge?
ibknadedeji
0
190
Goに育てられ開発者向けセキュリティ事業を立ち上げた僕が今向き合う、AI × セキュリティの最前線 / Go Conference 2025
flatt_security
0
350
ユニットテストに対する考え方の変遷 / Everyone should watch his live coding
mdstoy
0
130
生成AI_その前_に_マルチクラウド時代の信頼できるデータを支えるSnowflakeメタデータ活用術.pdf
cm_mikami
0
120
多野優介
tanoyusuke
1
460
o11yで育てる、強い内製開発組織
_awache
3
120
AI Agentと MCP Serverで実現する iOSアプリの 自動テスト作成の効率化
spiderplus_cb
0
510
VCC 2025 Write-up
bata_24
0
180
pprof vs runtime/trace (FlightRecorder)
task4233
0
170
業務自動化プラットフォーム Google Agentspace に入門してみる #devio2025
maroon1st
0
200
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
75
5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
2.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Fireside Chat
paigeccino
40
3.7k
Six Lessons from altMBA
skipperchong
28
4k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
20k
A designer walks into a library…
pauljervisheath
209
24k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Transcript
React Nativeの ルーティングばなし 20190618 hosomichi
自己紹介 @jshosomichi 所属:Fringe81 仕事:フロントエンド開発、その他なんでも 趣味:てつがく えいが まんが
せんでん WEB+DB PRESSという雑誌で 「Elm」というWebフロントエンド開発言語の 記事を執筆しました。 とても素敵な言語なので良かったら 手にとってみてくださいませ 6/24(月) はつばいです。
ワタクシが作ってるアプリ、とルータ
ワタクシが業務で作っているアプリ 仲間の活躍を投稿して、カジュアルにボーナ スを送り合うサービスです。 Twitterのようなタイムライン型のメインビュー をもち、タップやスワイプで異なる内容のタイ ムラインに遷移します。 モバイルアプリは初リリースから2年立ちまし た。入れ子タブになっていたり、細かいメ ニューなども表示します。
ルーティング手法について はじめはReactNativeのビルトイン コンポーネントである<Navigator/> を使っていたんですが、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 1つの画面をScreenとし、 ふつうの特殊機能なしの画面を GenericScreen タブ機能付きの画面を TabScreenとしました。 現状はこの2種類だけ扱っています。 画面の遷移はシンプルなスタック構造としました。
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/