Upgrade to Pro — share decks privately, control downloads, hide ads and more …

react-navigation について

react-navigation について

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

Yuichi Tateno

May 19, 2017
Tweet

More Decks by Yuichi Tateno

Other Decks in Technology

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