react-navigation について

by Yuichi Tateno

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

react-navigation ʹ͍ͭͯ

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

಺෦ঢ়ଶ (πϦʔ)

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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