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.2k
React_Nativeの_ルーティングばなし.pdf
hosomichi
June 18, 2019
Tweet
Share
More Decks by hosomichi
See All by hosomichi
Firebaseをフル活用したサーバーエンジニアレス新規事業プロトタイピング
hosomichi
1
2.4k
Elm is a good teacher
hosomichi
2
1.3k
改善React道
hosomichi
3
1k
ReactComponentのコンストラクタを追いかけて
hosomichi
8
3.6k
Other Decks in Technology
See All in Technology
Zennのパフォーマンスモニタリングでやっていること
ryosukeigarashi
0
170
データプロダクトの定義からはじめる、データコントラクト駆動なデータ基盤
chanyou0311
2
330
TanStack Routerに移行するのかい しないのかい、どっちなんだい! / Are you going to migrate to TanStack Router or not? Which one is it?
kaminashi
0
600
Making your applications cross-environment - OSCG 2024 NA
salaboy
0
200
【Startup CTO of the Year 2024 / Audience Award】アセンド取締役CTO 丹羽健
niwatakeru
0
1.3k
OCI Security サービス 概要
oracle4engineer
PRO
0
6.5k
B2B SaaSから見た最近のC#/.NETの進化
sansantech
PRO
0
910
100 名超が参加した日経グループ横断の競技型 AWS 学習イベント「Nikkei Group AWS GameDay」の紹介/mediajaws202411
nikkei_engineer_recruiting
1
170
rootlessコンテナのすゝめ - 研究室サーバーでもできる安全なコンテナ管理
kitsuya0828
3
390
テストコード品質を高めるためにMutation Testingライブラリ・Strykerを実戦導入してみた話
ysknsid25
7
2.7k
Lexical Analysis
shigashiyama
1
150
障害対応指揮の意思決定と情報共有における価値観 / Waroom Meetup #2
arthur1
5
490
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
88
5.7k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
Six Lessons from altMBA
skipperchong
27
3.5k
Done Done
chrislema
181
16k
How GitHub (no longer) Works
holman
310
140k
Visualization
eitanlees
145
15k
Agile that works and the tools we love
rasmusluckow
327
21k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.3k
The Cult of Friendly URLs
andyhume
78
6k
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/