react-navigation について

Transcript

1. 1.

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

2. 2.

   • ؘ໺ ༞Ұ (ηίϯ) • id:secondlife / @hotchpotch • WAmazing

   CTO • RN ྺ 2ϲ݄ • WAmazing ͷΞϓϦΛ RN Ͱ࣮૷த • flux Ͱ͸ͳ͍ΞʔΩςΫνϟ • MobX
3. 3.

   react-navigation ʹ͍ͭͯ

4. 4.

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

5. 5.

   ΞϓϦ͕ͪΐͬͱେ͖͘ͳΔͱ… • λϒܕ • ελοΫܕ • λϒ + ελοΫܕ •

   ྫ֎: Slack ͷΑ͏ͳΞϓϦͰಠࣗߏ੒
6. 6.

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

7. 7.

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

   tab ͳΒλϒ
8. 8.

   ԿΛදࣔ͢Δ͔ܾΊΔ෦෼ • Router (ͱݺ͹ΕΔ࣮૷) + State ؅ཧ • ελοΫͳΒ stack

   (pop/push) ͷߏ଄؅ཧ • λϒͳΒπϦʔߏ଄؅ཧ • deeplink ͔Βͷ෮ݩ • appname://search/Ωʔϫʔυ໊ ΛɺͲͷ ը໘ͰͲ͏දࣔ͢Δͷ͔ʁ • ελοΫͷਂ͍֊૚͔ΒผͷλϒʹҠΔʹ ͸?
9. 9.

   Ͳ͏ΞϓϦʹφϏήʔγϣϯΛ ૊ΈࠐΉ͔ • ࣗલ࣮૷ • ઌ΄ͲͷೋͭΛࣗલͰ࣮૷ • ΋͘͠͸1࣮ͭ૷ͯ͠ɺ΋͏1ͭ͸͋ Γ෺Λ࢖͏ •

   طଘφϏήʔγϣϯϥΠϒϥϦ • ԿΛબఆ͢΂͖͔
10. 10.

    PureJS ϥΠϒϥϦ • react-native-router-flux ˒ 4,391 • redux ͱ૊Έ߹Θͤͯ࢖͏ͳΒҰ൪ ͔ΜͨΜ

    • ௕͘࢖ΘΕ͍ͯΔ • react-navigation ˒4,337 • ࠓ೔࿩͢΍ͭ
11. 11.

    ωΠςΟϒ࣮૷ϥΠϒϥϦ • react-native-navigation ˒3,102 • ωΠςΟϒͷφϏήʔγϣϯͱ݁߹ • Ϗϧυׂ͕ͱେม • native-navigation

    ˒ 1,963 • AirBnB ۘ੡ɻͰ΋ AirBnB Ͱ΋·ͩ࢖ͬͯͳ͍ • ͪΐͬͱ࢖͏ʹ͸ૣ͗͢Δײ • iOS,Androidͷ࣮૷ʹৄ͘͠ແ͍ͱτϥϒϧ࣌େ ม
12. 12.

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

13. 13.

    react-navigation • ࠓ೥಄ʹಥવݱΕͨ(ਖ਼֬ʹ͸ public Խ)͞Εͨ • pure JS ͷφϏήʔγϣϯϥΠϒϥϦ •

    ΦϑΟγϟϧ͔Β΋ϦϯΫ
14. 14.

    react-navigation • ࠓ೥಄ʹಥવݱΕͨ(ਖ਼֬ʹ͸ public Խ)͞Εͨ • pure JS ͷφϏήʔγϣϯϥΠϒϥϦ •

    ΦϑΟγϟϧ͔Β΋ϦϯΫ
15. 15.

    react-navigation • ։ൃ͕੝Μ • 4݄຤ʹ 1.0.0-beta9 ϦϦʔε • ͜ͷมߋͰɺ݁ߏ API

    มߋ͕ߦΘΕ ͨ • ࠓޙ͸ API มߋ͸͋·ΓݶΓߦΘͣɺ ҆ఆϦϦʔεΛ໨ࢦ͢
16. 16.

    react-navigation • pureJS Ͱ͋Δ • ωΠςΟϒͷؾ࣋ͪΛߟ͑ͳͯ͘ྑ͍ • JS ͕ղΕ͹ࣗલͰͲ͏ʹ͔ग़དྷΔ •

    stack / tab / drawer ͳͲجຊతͳφϏήʔγϣ ϯʹରԠ • ૉͷ React ΞʔΩςΫνϟͳΒ͢ΜͳΓ࢖͑Δ • Android ͷόοΫϘλϯ౳ʹ΋΋ͪΖΜରԠ
17. 17.

    ྫΛݟΔ • examples/ NavigationPlayground • Α͋͘ΔΞϓϦΛߏ੒͢Δ ػೳͱαϯϓϧ͕Ұ௨Γ • ΧελϜλϒViewͷద༻ ΍

    deeplink (path) ͷ࣮૷ ͳͲ΋ • σϞ
18. 18.

    Ϋϥεͱ࣮૷ • RouterΫϥε • TabRouter / StackRouter • NavigationΫϥε •

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

    ಺෦ঢ়ଶ (πϦʔ)

20. 20.

    redux ΍ MobX Ͱѻ͏ • ࣗલ State ؅ཧͷ৔߹ • redux

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

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

    examples/redux
22. 22.

    MobX ͷ৔߹ • MobX Integration Guide • ࢒೦ͳ͕Β PR ͕

    Close ͞Εͨ • http://bit.ly/2pI2u7W • “react-navigation-mobx-example” • ࢲ͕࡞ͬͨαϯϓϧ • NavigationStore ͱ࣮ͯ͠૷ • ͖ͬ͞ͷσϞ΋͜Ε
23. 23.

    ( ͦ΋ͦ΋ MobX ͱ͸ ... ) • ObserverʹΑΔঢ়ଶ؅ཧͷΞϓϩʔν • flux

    ͷΑ͏ͳΞʔΩςΫνϟ “Ͱ͸ͳ ͍” • Hello, MobX! • http://leader22.github.io/slides/ node_gakuen-25/
24. 24.

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

    ελοΫͷπϦʔߏ଄ΛͲ͏ ѻ͏͔͕ϙΠϯτ
25. 25.

    react-navigation ʹ͍ͭͯ • ૉͷ ReactNative (state + props ) ͳΒ͢Μͳ

    Γ࢖͑Δ • PureJS ͳͷ͸ָ • Redux ΍ MobX ͷ৔߹ɺॳظֶशίετ͕͔ ͔Δ • ·ͩؾܰʹ࢖͑ΔܗͰ͸ແ͍ • ͕ɺग़ͯ·ͩ4ϲ݄ͳͷͰɺࠓޙΤίγες Ϝ͕ͲΜͲΜվળ͞Εͦ͏