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
american airlines®️ USA Contact Numbers: Complete 2025 Support Guide
supportflight
1
120
VGGT: Visual Geometry Grounded Transformer
peisuke
1
570
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.8k
TableauLangchainとは何か?
cielo1985
1
150
TLSから見るSREの未来
atpons
2
200
開発生産性を測る前にやるべきこと - 組織改善の実践 / Before Measuring Dev Productivity
kaonavi
14
8.2k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
54
22k
How Do I Contact HP Printer Support? [Full 2025 Guide for U.S. Businesses]
harrry1211
0
130
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
6
4.1k
全部AI、全員Cursor、ドキュメント駆動開発 〜DevinやGeminiも添えて〜
rinchsan
2
1k
SEQUENCE object comparison - db tech showcase 2025 LT2
nori_shinoda
0
270
「Chatwork」のEKS環境を支えるhelmfileを使用したマニフェスト管理術
hanayo04
1
230
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
95
14k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Navigating Team Friction
lara
187
15k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
Optimising Largest Contentful Paint
csswizardry
37
3.3k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
BBQ
matthewcrist
89
9.7k
How GitHub (no longer) Works
holman
314
140k
We Have a Design System, Now What?
morganepeng
53
7.7k
Gamification - CAS2011
davidbonilla
81
5.4k
Being A Developer After 40
akosma
90
590k
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/