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
頭部ふわふわ浄酔器
uyupun
0
230
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
14
82k
AIプロダクトのプロンプト実践テクニック / Practical Techniques for AI Product Prompts
saka2jp
0
120
入院医療費算定業務をAIで支援する:包括医療費支払い制度とDPCコーディング (公開版)
hagino3000
0
120
SRE × マネジメントレイヤーが挑戦した組織・会社のオブザーバビリティ改革 ― ビジネス価値と信頼性を両立するリアルな挑戦
coconala_engineer
0
290
マルチエージェントのチームビルディング_2025-10-25
shinoyamada
0
200
What's new in OpenShift 4.20
redhatlivestreaming
0
330
Okta Identity Governanceで実現する最小権限の原則 / Implementing the Principle of Least Privilege with Okta Identity Governance
tatsumin39
0
180
オブザーバビリティが育むシステム理解と好奇心
maruloop
3
1.4k
プロファイルとAIエージェントによる効率的なデバッグ / Effective debugging with profiler and AI assistant
ymotongpoo
1
440
Oracle Database@Google Cloud:サービス概要のご紹介
oracle4engineer
PRO
0
380
Kubernetes self-healing of your workload
hwchiu
0
590
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
How STYLIGHT went responsive
nonsquared
100
5.9k
Six Lessons from altMBA
skipperchong
29
4k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Done Done
chrislema
185
16k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Mobile First: as difficult as doing things right
swwweet
225
10k
Building Adaptive Systems
keathley
44
2.8k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
930
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
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/