react-navigation について

React Native Meetup#5 の発表資料です

Transcript

1. react-navigation ʹ ͍ͭͯ React Native Meetup#5 2017/5/19 WAmazing ؘ໺ ༞Ұ
2. • ؘ໺ ༞Ұ (ηίϯ) • id:secondlife / @hotchpotch • WAmazing CTO • RN ྺ 2ϲ݄ • WAmazing ͷΞϓϦΛ RN Ͱ࣮૷த • flux Ͱ͸ͳ͍ΞʔΩςΫνϟ • MobX
3. react-navigation ʹ͍ͭͯ
4. navigation ϥΠϒϥϦ͸ඞཁ? • ը໘ߏ੒਺͕গͳ͍ͱେ͛͞ͳ෺͸ෆ ཁ • ඪ४ͷ Navigatitor Ͱ΋ରԠՄೳ
5. ΞϓϦ͕ͪΐͬͱେ͖͘ͳΔͱ… • λϒܕ • ελοΫܕ • λϒ + ελοΫܕ • ྫ֎: Slack ͷΑ͏ͳΞϓϦͰಠࣗߏ੒
6. φϏήʔγϣϯΛ࣮૷͢Δʹ౰ ͨΓɺඞཁͳཁૉ • ը໘Λߏ੒͢Δ෦෼ • ԿΛදࣔ͢Δ͔ܾΊΔ෦෼
7. ը໘Λߏ੒͢Δ෦෼ • stack ͳΒφϏήʔγϣϯόʔ • λΠτϧ΍໭ΔϘλϯɺͦͷଞϘλ ϯ • ओʹϔομʹ࣮૷͞ΕͯΔ • tab ͳΒλϒ
8. ԿΛදࣔ͢Δ͔ܾΊΔ෦෼ • Router (ͱݺ͹ΕΔ࣮૷) + State ؅ཧ • ελοΫͳΒ stack (pop/push) ͷߏ଄؅ཧ • λϒͳΒπϦʔߏ଄؅ཧ • deeplink ͔Βͷ෮ݩ • appname://search/Ωʔϫʔυ໊ ΛɺͲͷ ը໘ͰͲ͏දࣔ͢Δͷ͔ʁ • ελοΫͷਂ͍֊૚͔ΒผͷλϒʹҠΔʹ ͸?
9. Ͳ͏ΞϓϦʹφϏήʔγϣϯΛ ૊ΈࠐΉ͔ • ࣗલ࣮૷ • ઌ΄ͲͷೋͭΛࣗલͰ࣮૷ • ΋͘͠͸1࣮ͭ૷ͯ͠ɺ΋͏1ͭ͸͋ Γ෺Λ࢖͏ • طଘφϏήʔγϣϯϥΠϒϥϦ • ԿΛબఆ͢΂͖͔
10. PureJS ϥΠϒϥϦ • react-native-router-flux ˒ 4,391 • redux ͱ૊Έ߹Θͤͯ࢖͏ͳΒҰ൪ ͔ΜͨΜ • ௕͘࢖ΘΕ͍ͯΔ • react-navigation ˒4,337 • ࠓ೔࿩͢΍ͭ
11. ωΠςΟϒ࣮૷ϥΠϒϥϦ • react-native-navigation ˒3,102 • ωΠςΟϒͷφϏήʔγϣϯͱ݁߹ • Ϗϧυׂ͕ͱେม • native-navigation ˒ 1,963 • AirBnB ۘ੡ɻͰ΋ AirBnB Ͱ΋·ͩ࢖ͬͯͳ͍ • ͪΐͬͱ࢖͏ʹ͸ૣ͗͢Δײ • iOS,Androidͷ࣮૷ʹৄ͘͠ແ͍ͱτϥϒϧ࣌େ ม
12. ͲΕ࢖͑͹ྑ͍ͷʁ • native-navigation ͷ readme.md ʹྑ ͍͜ͱॻ͍ͯ͋ͬͨ
13. react-navigation • ࠓ೥಄ʹಥવݱΕͨ(ਖ਼֬ʹ͸ public Խ)͞Εͨ • pure JS ͷφϏήʔγϣϯϥΠϒϥϦ • ΦϑΟγϟϧ͔Β΋ϦϯΫ
14. react-navigation • ࠓ೥಄ʹಥવݱΕͨ(ਖ਼֬ʹ͸ public Խ)͞Εͨ • pure JS ͷφϏήʔγϣϯϥΠϒϥϦ • ΦϑΟγϟϧ͔Β΋ϦϯΫ
15. react-navigation • ։ൃ͕੝Μ • 4݄຤ʹ 1.0.0-beta9 ϦϦʔε • ͜ͷมߋͰɺ݁ߏ API มߋ͕ߦΘΕ ͨ • ࠓޙ͸ API มߋ͸͋·ΓݶΓߦΘͣɺ ҆ఆϦϦʔεΛ໨ࢦ͢
16. react-navigation • pureJS Ͱ͋Δ • ωΠςΟϒͷؾ࣋ͪΛߟ͑ͳͯ͘ྑ͍ • JS ͕ղΕ͹ࣗલͰͲ͏ʹ͔ग़དྷΔ • stack / tab / drawer ͳͲجຊతͳφϏήʔγϣ ϯʹରԠ • ૉͷ React ΞʔΩςΫνϟͳΒ͢ΜͳΓ࢖͑Δ • Android ͷόοΫϘλϯ౳ʹ΋΋ͪΖΜରԠ
17. ྫΛݟΔ • examples/ NavigationPlayground • Α͋͘ΔΞϓϦΛߏ੒͢Δ ػೳͱαϯϓϧ͕Ұ௨Γ • ΧελϜλϒViewͷద༻ ΍ deeplink (path) ͷ࣮૷ ͳͲ΋ • σϞ
18. Ϋϥεͱ࣮૷ • RouterΫϥε • TabRouter / StackRouter • NavigationΫϥε • ͲͷΑ͏ʹϨϯμϦϯά͢Δ͔ • Router + ϨϯμϥʔͱͳΔView(TabView / CardStack ౳) ͷ૊Έ߹Θͤ • NavigatorΫϥε • ঢ়ଶΛߟྀͭͭ͠ɺ্ೋͭΛ͍͍ײ͡ʹ΍ͬͯ͘ ΕΔ
19. ಺෦ঢ়ଶ (πϦʔ)
20. redux ΍ MobX Ͱѻ͏ • ࣗલ State ؅ཧͷ৔߹ • redux ΍ MobX ͕ɺNavigator ͷঢ়ଶΛ؅ཧ͢Δ • ΠϯςάϨʔτ͢Δ࣮૷͕ඞཁ • Navigation ͷ state • φϏήʔγϣϯঢ়ଶΛͲ͏΋͔ͭ • Router ͷ dispatcher • ৽͍͠φϏήʔγϣϯঢ়ଶΛฦ͢
21. Redux ͷ৔߹ • ΦϑΟγϟϧͷ Redux Integration υ Ωϡϝϯτ • ϨϙδτϦ಺෦ͷ examples/redux
22. MobX ͷ৔߹ • MobX Integration Guide • ࢒೦ͳ͕Β PR ͕ Close ͞Εͨ • http://bit.ly/2pI2u7W • “react-navigation-mobx-example” • ࢲ͕࡞ͬͨαϯϓϧ • NavigationStore ͱ࣮ͯ͠૷ • ͖ͬ͞ͷσϞ΋͜Ε
23. ( ͦ΋ͦ΋ MobX ͱ͸ ... ) • ObserverʹΑΔঢ়ଶ؅ཧͷΞϓϩʔν • flux ͷΑ͏ͳΞʔΩςΫνϟ “Ͱ͸ͳ ͍” • Hello, MobX! • http://leader22.github.io/slides/ node_gakuen-25/
24. ࣮ΞϓϦͰ࢖ͬͯΈͨײ૝ • φϏήʔγϣϯͷ state ΛͲ͏ѻ͏͔ ҙࣝͰ͖Δͱॴ·Ͱཧղ͢Δͱɺେମ ࢥͬͨ௨Γʹಈ͘Α͏ʹ • ≒λϒ x ελοΫͷπϦʔߏ଄ΛͲ͏ ѻ͏͔͕ϙΠϯτ
25. react-navigation ʹ͍ͭͯ • ૉͷ ReactNative (state + props ) ͳΒ͢Μͳ Γ࢖͑Δ • PureJS ͳͷ͸ָ • Redux ΍ MobX ͷ৔߹ɺॳظֶशίετ͕͔ ͔Δ • ·ͩؾܰʹ࢖͑ΔܗͰ͸ແ͍ • ͕ɺग़ͯ·ͩ4ϲ݄ͳͷͰɺࠓޙΤίγες Ϝ͕ͲΜͲΜվળ͞Εͦ͏