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
AWS環境のリソース調査を Claude Code で効率化 / aws investigate with cc devio2025
masahirokawahara
2
1.2k
退屈なことはDevinにやらせよう〜〜Devin APIを使ったVisual Regression Testの自動追加〜
kawamataryo
4
1.4k
今!ソフトウェアエンジニアがハードウェアに手を出すには
mackee
9
4k
LLM翻訳ツールの開発と海外のお客様対応等への社内導入事例
gree_tech
PRO
0
500
iPhone Eye Tracking機能から学ぶやさしいアクセシビリティ
fujiyamaorange
0
530
『FailNet~やらかし共有SNS~』エレベーターピッチ
yokomachi
1
200
カミナシ社の『ID管理基盤』製品内製 - その意思決定背景と2年間の進化 #AWSUnicornDay / Kaminashi ID - The Big Whys
kaminashi
3
760
Function Body Macros で、SwiftUI の View に Accessibility Identifier を自動付与する/Function Body Macros: Autogenerate accessibility identifiers for SwiftUI Views
miichan
2
160
Vault meets Kubernetes
mochizuki875
0
250
RSCの時代にReactとフレームワークの境界を探る
uhyo
9
2.8k
「魔法少女まどか☆マギカ Magia Exedra」の必殺技演出を徹底解剖! -キャラクターの魅力を最大限にファンに届けるためのこだわり-
gree_tech
PRO
0
500
絶対に失敗できないキャンペーンページの高速かつ安全な開発、WINTICKET × microCMS の開発事例
microcms
0
390
Featured
See All Featured
Side Projects
sachag
455
43k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
800
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Code Review Best Practice
trishagee
70
19k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
RailsConf 2023
tenderlove
30
1.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/