react-navigation について

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ϲ݄ͳͷͰɺࠓޙΤίγες Ϝ͕ͲΜͲΜվળ͞Εͦ͏