Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
react-navigation について
Yuichi Tateno
May 19, 2017
Technology
3
1.5k
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
19k
hotchpotch
1
3k
hotchpotch
3
1k
hotchpotch
141
49k
hotchpotch
10
10k
Other Decks in Technology
See All in Technology
inductor
1
130
go5paopao
4
490
soracom
0
150
willnet
12
4.1k
minma
0
120
koukyo1994
3
680
mahito
0
200
twada
PRO
6
2k
sadayoshitada0919
0
320
benzookapi
1
410
kahara33
0
110
lancers_pr
4
1.5k
Featured
See All Featured
jonrohan
1021
380k
roundedbygravity
242
21k
yeseniaperezcruz
302
31k
imathis
479
150k
michaelherold
225
8.5k
tammielis
237
23k
ufuk
56
5.4k
malarkey
392
61k
myddelton
109
11k
akmur
252
19k
tanoku
86
8.6k
morganepeng
93
14k
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ϲ݄ͳͷͰɺࠓޙΤίγες Ϝ͕ͲΜͲΜվળ͞Εͦ͏