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
ユーザのために技術をどう活かすか
hotchpotch
27
20k
GlitchKit
hotchpotch
1
3.3k
クラウドを使った ユーザ向けサービス開発の面白さ
hotchpotch
3
1.2k
pull request を利用した開発ワークフロー
hotchpotch
141
52k
料理を支える技術2012
hotchpotch
10
11k
Other Decks in Technology
See All in Technology
強いチームと開発生産性
onk
PRO
35
11k
rootlessコンテナのすゝめ - 研究室サーバーでもできる安全なコンテナ管理
kitsuya0828
3
390
DynamoDB でスロットリングが発生したとき/when_throttling_occurs_in_dynamodb_short
emiki
0
250
iOSチームとAndroidチームでブランチ運用が違ったので整理してます
sansantech
PRO
0
150
誰も全体を知らない ~ ロールの垣根を超えて引き上げる開発生産性 / Boosting Development Productivity Across Roles
kakehashi
1
230
New Relicを活用したSREの最初のステップ / NRUG OKINAWA VOL.3
isaoshimizu
3
620
The Rise of LLMOps
asei
7
1.7k
Amplify Gen2 Deep Dive / バックエンドの型をいかにしてフロントエンドへ伝えるか #TSKaigi #TSKaigiKansai #AWSAmplifyJP
tacck
PRO
0
390
プロダクト活用度で見えた真実 ホリゾンタルSaaSでの顧客解像度の高め方
tadaken3
0
180
Zennのパフォーマンスモニタリングでやっていること
ryosukeigarashi
0
150
マルチプロダクトな開発組織で 「開発生産性」に向き合うために試みたこと / Improving Multi-Product Dev Productivity
sugamasao
1
310
CysharpのOSS群から見るModern C#の現在地
neuecc
2
3.5k
Featured
See All Featured
Designing on Purpose - Digital PM Summit 2013
jponch
115
7k
Code Review Best Practice
trishagee
64
17k
Designing Experiences People Love
moore
138
23k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
How to Ace a Technical Interview
jacobian
276
23k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.2k
4 Signs Your Business is Dying
shpigford
180
21k
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ϲ݄ͳͷͰɺࠓޙΤίγες Ϝ͕ͲΜͲΜվળ͞Εͦ͏