react-navigation について

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

Transcript

1. react-navigation ʹ
   ͍ͭͯ
   React Native Meetup#5
   2017/5/19
   WAmazing ؘ໺ ༞Ұ
   

   View Slide

2. • ؘ໺ ༞Ұ (ηίϯ)
   • id:secondlife / @hotchpotch
   • WAmazing CTO
   • RN ྺ 2ϲ݄
   • WAmazing ͷΞϓϦΛ RN Ͱ࣮૷த
   • flux Ͱ͸ͳ͍ΞʔΩςΫνϟ
   • MobX
   

   View Slide

3. react-navigation
   ʹ͍ͭͯ
   

   View Slide

4. navigation ϥΠϒϥϦ͸ඞཁ?
   • ը໘ߏ੒਺͕গͳ͍ͱେ͛͞ͳ෺͸ෆ
   ཁ
   • ඪ४ͷ Navigatitor Ͱ΋ରԠՄೳ
   

   View Slide

5. ΞϓϦ͕ͪΐͬͱେ͖͘ͳΔͱ…
   • λϒܕ
   • ελοΫܕ
   • λϒ + ελοΫܕ
   • ྫ֎: Slack ͷΑ͏ͳΞϓϦͰಠࣗߏ੒
   

   View Slide

6. φϏήʔγϣϯΛ࣮૷͢Δʹ౰
   ͨΓɺඞཁͳཁૉ
   • ը໘Λߏ੒͢Δ෦෼
   • ԿΛදࣔ͢Δ͔ܾΊΔ෦෼
   

   View Slide

7. ը໘Λߏ੒͢Δ෦෼
   • stack ͳΒφϏήʔγϣϯόʔ
   • λΠτϧ΍໭ΔϘλϯɺͦͷଞϘλ
   ϯ
   • ओʹϔομʹ࣮૷͞ΕͯΔ
   • tab ͳΒλϒ
   

   View Slide

8. ԿΛදࣔ͢Δ͔ܾΊΔ෦෼
   • Router (ͱݺ͹ΕΔ࣮૷) + State ؅ཧ
   • ελοΫͳΒ stack (pop/push) ͷߏ଄؅ཧ
   • λϒͳΒπϦʔߏ଄؅ཧ
   • deeplink ͔Βͷ෮ݩ
   • appname://search/Ωʔϫʔυ໊ ΛɺͲͷ
   ը໘ͰͲ͏දࣔ͢Δͷ͔ʁ
   • ελοΫͷਂ͍֊૚͔ΒผͷλϒʹҠΔʹ
   ͸?
   

   View Slide

9. Ͳ͏ΞϓϦʹφϏήʔγϣϯΛ
   ૊ΈࠐΉ͔
   • ࣗલ࣮૷
   • ઌ΄ͲͷೋͭΛࣗલͰ࣮૷
   • ΋͘͠͸1࣮ͭ૷ͯ͠ɺ΋͏1ͭ͸͋
   Γ෺Λ࢖͏
   • طଘφϏήʔγϣϯϥΠϒϥϦ
   • ԿΛબఆ͢΂͖͔
   

   View Slide

10. PureJS ϥΠϒϥϦ
    • react-native-router-flux ˒ 4,391
    • redux ͱ૊Έ߹Θͤͯ࢖͏ͳΒҰ൪
    ͔ΜͨΜ
    • ௕͘࢖ΘΕ͍ͯΔ
    • react-navigation ˒4,337
    • ࠓ೔࿩͢΍ͭ
    

    View Slide

11. ωΠςΟϒ࣮૷ϥΠϒϥϦ
    • react-native-navigation ˒3,102
    • ωΠςΟϒͷφϏήʔγϣϯͱ݁߹
    • Ϗϧυׂ͕ͱେม
    • native-navigation ˒ 1,963
    • AirBnB ۘ੡ɻͰ΋ AirBnB Ͱ΋·ͩ࢖ͬͯͳ͍
    • ͪΐͬͱ࢖͏ʹ͸ૣ͗͢Δײ
    • iOS,Androidͷ࣮૷ʹৄ͘͠ແ͍ͱτϥϒϧ࣌େ
    ม
    

    View Slide

12. ͲΕ࢖͑͹ྑ͍ͷʁ
    • native-navigation ͷ readme.md ʹྑ
    ͍͜ͱॻ͍ͯ͋ͬͨ
    

    View Slide

13. react-navigation
    • ࠓ೥಄ʹಥવݱΕͨ(ਖ਼֬ʹ͸ public
    Խ)͞Εͨ
    • pure JS ͷφϏήʔγϣϯϥΠϒϥϦ
    • ΦϑΟγϟϧ͔Β΋ϦϯΫ
    

    View Slide

14. react-navigation
    • ࠓ೥಄ʹಥવݱΕͨ(ਖ਼֬ʹ͸ public
    Խ)͞Εͨ
    • pure JS ͷφϏήʔγϣϯϥΠϒϥϦ
    • ΦϑΟγϟϧ͔Β΋ϦϯΫ
    

    View Slide

15. react-navigation
    • ։ൃ͕੝Μ
    • 4݄຤ʹ 1.0.0-beta9 ϦϦʔε
    • ͜ͷมߋͰɺ݁ߏ API มߋ͕ߦΘΕ
    ͨ
    • ࠓޙ͸ API มߋ͸͋·ΓݶΓߦΘͣɺ
    ҆ఆϦϦʔεΛ໨ࢦ͢
    

    View Slide

16. react-navigation
    • pureJS Ͱ͋Δ
    • ωΠςΟϒͷؾ࣋ͪΛߟ͑ͳͯ͘ྑ͍
    • JS ͕ղΕ͹ࣗલͰͲ͏ʹ͔ग़དྷΔ
    • stack / tab / drawer ͳͲجຊతͳφϏήʔγϣ
    ϯʹରԠ
    • ૉͷ React ΞʔΩςΫνϟͳΒ͢ΜͳΓ࢖͑Δ
    • Android ͷόοΫϘλϯ౳ʹ΋΋ͪΖΜରԠ
    

    View Slide

17. ྫΛݟΔ
    • examples/
    NavigationPlayground
    • Α͋͘ΔΞϓϦΛߏ੒͢Δ
    ػೳͱαϯϓϧ͕Ұ௨Γ
    • ΧελϜλϒViewͷద༻
    ΍ deeplink (path) ͷ࣮૷
    ͳͲ΋
    • σϞ
    

    View Slide

18. Ϋϥεͱ࣮૷
    • RouterΫϥε
    • TabRouter / StackRouter
    • NavigationΫϥε
    • ͲͷΑ͏ʹϨϯμϦϯά͢Δ͔
    • Router + ϨϯμϥʔͱͳΔView(TabView /
    CardStack ౳) ͷ૊Έ߹Θͤ
    • NavigatorΫϥε
    • ঢ়ଶΛߟྀͭͭ͠ɺ্ೋͭΛ͍͍ײ͡ʹ΍ͬͯ͘
    ΕΔ
    

    View Slide

19. ಺෦ঢ়ଶ (πϦʔ)
    

    View Slide

20. redux ΍ MobX Ͱѻ͏
    • ࣗલ State ؅ཧͷ৔߹
    • redux ΍ MobX ͕ɺNavigator ͷঢ়ଶΛ؅ཧ͢Δ
    • ΠϯςάϨʔτ͢Δ࣮૷͕ඞཁ
    • Navigation ͷ state
    • φϏήʔγϣϯঢ়ଶΛͲ͏΋͔ͭ
    • Router ͷ dispatcher
    • ৽͍͠φϏήʔγϣϯঢ়ଶΛฦ͢
    

    View Slide

21. Redux ͷ৔߹
    • ΦϑΟγϟϧͷ Redux Integration υ
    Ωϡϝϯτ
    • ϨϙδτϦ಺෦ͷ examples/redux
    

    View Slide

22. MobX ͷ৔߹
    • MobX Integration Guide
    • ࢒೦ͳ͕Β PR ͕ Close ͞Εͨ
    • http://bit.ly/2pI2u7W
    • “react-navigation-mobx-example”
    • ࢲ͕࡞ͬͨαϯϓϧ
    • NavigationStore ͱ࣮ͯ͠૷
    • ͖ͬ͞ͷσϞ΋͜Ε
    

    View Slide

23. ( ͦ΋ͦ΋ MobX ͱ͸ ... )
    • ObserverʹΑΔঢ়ଶ؅ཧͷΞϓϩʔν
    • flux ͷΑ͏ͳΞʔΩςΫνϟ “Ͱ͸ͳ
    ͍”
    • Hello, MobX!
    • http://leader22.github.io/slides/
    node_gakuen-25/
    

    View Slide

24. ࣮ΞϓϦͰ࢖ͬͯΈͨײ૝
    • φϏήʔγϣϯͷ state ΛͲ͏ѻ͏͔
    ҙࣝͰ͖Δͱॴ·Ͱཧղ͢Δͱɺେମ
    ࢥͬͨ௨Γʹಈ͘Α͏ʹ
    • ≒λϒ x ελοΫͷπϦʔߏ଄ΛͲ͏
    ѻ͏͔͕ϙΠϯτ
    

    View Slide

25. react-navigation ʹ͍ͭͯ
    • ૉͷ ReactNative (state + props ) ͳΒ͢Μͳ
    Γ࢖͑Δ
    • PureJS ͳͷ͸ָ
    • Redux ΍ MobX ͷ৔߹ɺॳظֶशίετ͕͔
    ͔Δ
    • ·ͩؾܰʹ࢖͑ΔܗͰ͸ແ͍
    • ͕ɺग़ͯ·ͩ4ϲ݄ͳͷͰɺࠓޙΤίγες
    Ϝ͕ͲΜͲΜվળ͞Εͦ͏
    

    View Slide