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

react-navigation について

react-navigation について

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

2997ec7879942bd0415690c85731e328?s=128

Yuichi Tateno

May 19, 2017
Tweet

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