React Native Meetup#5 の発表資料です
react-navigation ʹ͍ͭͯReact Native Meetup#52017/5/19WAmazing ؘ ༞Ұ
View Slide
• ؘ ༞Ұ (ηίϯ)• 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• ։ൃ͕Μ• 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ϲ݄ͳͷͰɺࠓޙΤίγεςϜ͕ͲΜͲΜվળ͞Εͦ͏