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-navigation について
Search
Yuichi Tateno
May 19, 2017
Technology
3
2.1k
react-navigation について
React Native Meetup#5 の発表資料です
Yuichi Tateno
May 19, 2017
Tweet
Share
More Decks by Yuichi Tateno
See All by Yuichi Tateno
Ask! NIKKEI RAG検索技術の深層
hotchpotch
21
9.1k
ユーザのために技術をどう活かすか
hotchpotch
27
21k
GlitchKit
hotchpotch
1
3.4k
クラウドを使った ユーザ向けサービス開発の面白さ
hotchpotch
3
1.2k
pull request を利用した開発ワークフロー
hotchpotch
141
52k
料理を支える技術2012
hotchpotch
10
11k
Other Decks in Technology
See All in Technology
CDKコード品質UP!ナイスな自作コンストラクタを作るための便利インターフェース
harukasakihara
2
230
ビジネス職が分析も担う事業部制組織でのデータ活用の仕組みづくり / Enabling Data Analytics in Business-Led Divisional Organizations
zaimy
1
390
〜『世界中の家族のこころのインフラ』を目指して”次の10年”へ〜 SREが導いたグローバルサービスの信頼性向上戦略とその舞台裏 / Towards the Next Decade: Enhancing Global Service Reliability
kohbis
3
1.5k
[SRE NEXT 2025] すみずみまで暖かく照らすあなたの太陽でありたい
carnappopper
2
470
Delegating the chores of authenticating users to Keycloak
ahus1
0
190
AWS 怖い話 WAF編 @fillz_noh #AWSStartup #AWSStartup_Kansai
fillznoh
0
130
助けて! XからWaylandに移行しないと新しいGNOMEが使えなくなっちゃう 2025-07-12
nobutomurata
2
200
ABEMAの本番環境負荷試験への挑戦
mk2taiga
5
1.3k
全部AI、全員Cursor、ドキュメント駆動開発 〜DevinやGeminiも添えて〜
rinchsan
10
5.1k
スタックチャン家庭用アシスタントへの道
kanekoh
0
120
Maintainer Meetupで「生の声」を聞く ~講演だけじゃないKubeCon
logica0419
0
110
Autify Company Deck
autifyhq
2
44k
Featured
See All Featured
Gamification - CAS2011
davidbonilla
81
5.4k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.3k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Code Reviewing Like a Champion
maltzj
524
40k
Producing Creativity
orderedlist
PRO
346
40k
Optimizing for Happiness
mojombo
379
70k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Thoughts on Productivity
jonyablonski
69
4.7k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
990
Transcript
react-navigation ʹ ͍ͭͯ React Native Meetup#5 2017/5/19 WAmazing ؘ ༞Ұ
• ؘ ༞Ұ (ηίϯ) • id:secondlife / @hotchpotch • WAmazing
CTO • RN ྺ 2ϲ݄ • WAmazing ͷΞϓϦΛ RN Ͱ࣮த • flux Ͱͳ͍ΞʔΩςΫνϟ • MobX
react-navigation ʹ͍ͭͯ
navigation ϥΠϒϥϦඞཁ? • ը໘ߏ͕গͳ͍ͱେ͛͞ͳෆ ཁ • ඪ४ͷ Navigatitor ͰରԠՄೳ
ΞϓϦ͕ͪΐͬͱେ͖͘ͳΔͱ… • λϒܕ • ελοΫܕ • λϒ + ελοΫܕ •
ྫ֎: Slack ͷΑ͏ͳΞϓϦͰಠࣗߏ
φϏήʔγϣϯΛ࣮͢Δʹ ͨΓɺඞཁͳཁૉ • ը໘Λߏ͢Δ෦ • ԿΛදࣔ͢Δ͔ܾΊΔ෦
ը໘Λߏ͢Δ෦ • stack ͳΒφϏήʔγϣϯόʔ • λΠτϧΔϘλϯɺͦͷଞϘλ ϯ • ओʹϔομʹ࣮͞ΕͯΔ •
tab ͳΒλϒ
ԿΛදࣔ͢Δ͔ܾΊΔ෦ • Router (ͱݺΕΔ࣮) + State ཧ • ελοΫͳΒ stack
(pop/push) ͷߏཧ • λϒͳΒπϦʔߏཧ • deeplink ͔Βͷ෮ݩ • appname://search/Ωʔϫʔυ໊ ΛɺͲͷ ը໘ͰͲ͏දࣔ͢Δͷ͔ʁ • ελοΫͷਂ͍֊͔ΒผͷλϒʹҠΔʹ ?
Ͳ͏ΞϓϦʹφϏήʔγϣϯΛ ΈࠐΉ͔ • ࣗલ࣮ • ઌ΄ͲͷೋͭΛࣗલͰ࣮ • ͘͠1࣮ͭͯ͠ɺ͏1ͭ͋ ΓΛ͏ •
طଘφϏήʔγϣϯϥΠϒϥϦ • ԿΛબఆ͖͔͢
PureJS ϥΠϒϥϦ • react-native-router-flux ˒ 4,391 • redux ͱΈ߹Θͤͯ͏ͳΒҰ൪ ͔ΜͨΜ
• ͘ΘΕ͍ͯΔ • react-navigation ˒4,337 • ࠓͭ͢
ωΠςΟϒ࣮ϥΠϒϥϦ • react-native-navigation ˒3,102 • ωΠςΟϒͷφϏήʔγϣϯͱ݁߹ • Ϗϧυׂ͕ͱେม • native-navigation
˒ 1,963 • AirBnB ۘɻͰ AirBnB Ͱ·ͩͬͯͳ͍ • ͪΐͬͱ͏ʹૣ͗͢Δײ • iOS,Androidͷ࣮ʹৄ͘͠ແ͍ͱτϥϒϧ࣌େ ม
ͲΕ͑ྑ͍ͷʁ • native-navigation ͷ readme.md ʹྑ ͍͜ͱॻ͍ͯ͋ͬͨ
react-navigation • ࠓ಄ʹಥવݱΕͨ(ਖ਼֬ʹ public Խ)͞Εͨ • pure JS ͷφϏήʔγϣϯϥΠϒϥϦ •
ΦϑΟγϟϧ͔ΒϦϯΫ
react-navigation • ࠓ಄ʹಥવݱΕͨ(ਖ਼֬ʹ public Խ)͞Εͨ • pure JS ͷφϏήʔγϣϯϥΠϒϥϦ •
ΦϑΟγϟϧ͔ΒϦϯΫ
react-navigation • ։ൃ͕Μ • 4݄ʹ 1.0.0-beta9 ϦϦʔε • ͜ͷมߋͰɺ݁ߏ API
มߋ͕ߦΘΕ ͨ • ࠓޙ API มߋ͋·ΓݶΓߦΘͣɺ ҆ఆϦϦʔεΛࢦ͢
react-navigation • pureJS Ͱ͋Δ • ωΠςΟϒͷؾ࣋ͪΛߟ͑ͳͯ͘ྑ͍ • JS ͕ղΕࣗલͰͲ͏ʹ͔ग़དྷΔ •
stack / tab / drawer ͳͲجຊతͳφϏήʔγϣ ϯʹରԠ • ૉͷ React ΞʔΩςΫνϟͳΒ͢ΜͳΓ͑Δ • Android ͷόοΫϘλϯʹͪΖΜରԠ
ྫΛݟΔ • examples/ NavigationPlayground • Α͋͘ΔΞϓϦΛߏ͢Δ ػೳͱαϯϓϧ͕Ұ௨Γ • ΧελϜλϒViewͷద༻
deeplink (path) ͷ࣮ ͳͲ • σϞ
Ϋϥεͱ࣮ • RouterΫϥε • TabRouter / StackRouter • NavigationΫϥε •
ͲͷΑ͏ʹϨϯμϦϯά͢Δ͔ • Router + ϨϯμϥʔͱͳΔView(TabView / CardStack ) ͷΈ߹Θͤ • NavigatorΫϥε • ঢ়ଶΛߟྀͭͭ͠ɺ্ೋͭΛ͍͍ײ͡ʹͬͯ͘ ΕΔ
෦ঢ়ଶ (πϦʔ)
redux MobX Ͱѻ͏ • ࣗલ State ཧͷ߹ • redux
MobX ͕ɺNavigator ͷঢ়ଶΛཧ͢Δ • ΠϯςάϨʔτ͢Δ࣮͕ඞཁ • Navigation ͷ state • φϏήʔγϣϯঢ়ଶΛͲ͏͔ͭ • Router ͷ dispatcher • ৽͍͠φϏήʔγϣϯঢ়ଶΛฦ͢
Redux ͷ߹ • ΦϑΟγϟϧͷ Redux Integration υ Ωϡϝϯτ • ϨϙδτϦ෦ͷ
examples/redux
MobX ͷ߹ • MobX Integration Guide • ೦ͳ͕Β PR ͕
Close ͞Εͨ • http://bit.ly/2pI2u7W • “react-navigation-mobx-example” • ࢲ͕࡞ͬͨαϯϓϧ • NavigationStore ͱ࣮ͯ͠ • ͖ͬ͞ͷσϞ͜Ε
( ͦͦ MobX ͱ ... ) • ObserverʹΑΔঢ়ଶཧͷΞϓϩʔν • flux
ͷΑ͏ͳΞʔΩςΫνϟ “Ͱͳ ͍” • Hello, MobX! • http://leader22.github.io/slides/ node_gakuen-25/
࣮ΞϓϦͰͬͯΈͨײ • φϏήʔγϣϯͷ state ΛͲ͏ѻ͏͔ ҙࣝͰ͖Δͱॴ·Ͱཧղ͢Δͱɺେମ ࢥͬͨ௨Γʹಈ͘Α͏ʹ • ≒λϒ x
ελοΫͷπϦʔߏΛͲ͏ ѻ͏͔͕ϙΠϯτ
react-navigation ʹ͍ͭͯ • ૉͷ ReactNative (state + props ) ͳΒ͢Μͳ
Γ͑Δ • PureJS ͳͷָ • Redux MobX ͷ߹ɺॳظֶशίετ͕͔ ͔Δ • ·ͩؾܰʹ͑ΔܗͰແ͍ • ͕ɺग़ͯ·ͩ4ϲ݄ͳͷͰɺࠓޙΤίγες Ϝ͕ͲΜͲΜվળ͞Εͦ͏