Tweet
Tweet

Slide 1

Slide 1 text

2019/01/17 Θͨͳ΂Ώ͏ REACT-NAVIGATION V2 TO V3

Slide 2

Slide 2 text

▸ ࣗݾ঺հ ▸ react-navigationͱ͸ʁ ▸ v1 -> v2ͷΞοϓσʔτ ▸ v2 -> v3ͷΞοϓσʔτ ▸ Authentication flowsʹ͍ͭͯ ▸ ·ͱΊ ֓ཁ

Slide 3

Slide 3 text

ࣗݾ঺հ(1) Θͨͳ΂Ώ͏ ▸ ॴଐ ▸ גࣜձࣾg&h ▸ Web / ΞϓϦΛझຯͰެ։ ▸ ࢓ࣄ಺༰ ▸ αʔό / ϑϩϯτ / ΞϓϦ / Web ▸ ΞΧ΢ϯτ ▸ Twitter : @hmktsu ▸ Github : @watanabeyu ࣮ફExpo͍ͬͯ͏ຊΛڞஶͰ2018೥12݄ʹग़൛

Slide 4

Slide 4 text

ࣗݾ঺հ(2) ▸ https://www.gandh.jp ▸ 3໊(ΤϯδχΞ͸ࣗ෼Ұਓ)Ͱฏۉ೥ྸ30൒͹ͷγχΞձࣾ ▸ ΤϯλϝܥʹಛԽͨ͠αʔϏεΛओʹӡӦ ▸ ݱࡏͷϝΠϯࣄۀɿhttps://www.weddyweddy.net ▸ μϯαʔ޲͚ͷϓϥοτϑΥʔϜܥSNSΞϓϦ ▸ ͪ͜ΒͰνϣΠεͨ͠གྷΓ΍͍͢30ඵఔ౓ͷۂͰགྷͬͯಈըΛΞοϓ

Slide 5

Slide 5 text

REACT-NAVIGATION V2 TO V3 v1 -> v2ͷΞοϓσʔτ

Slide 6

Slide 6 text

▸ 2018೥5݄ࠒʹv2΁Ξοϓσʔτ ▸ redux෦෼Λ෼཭(createReduxBoundAddListenerͷഇࢭͳͲ) ▸ NavigationActionsͷҰ෦͕StackActionsʹมߋ ▸ StackNavigator({…})ͳͲ͕createStackNavigator({…})ʹมߋ ▸ navigation.push()Λ࢖ͬͯεΫϦʔϯͷॏͳΓΛ͢ΔΑ͏ʹมߋ ▸ bottomTabNavigatorΛΧελϜ͍ͨ͠৔߹͸ɺreact-navigation-tabs Λimport͢ΔΑ͏ʹ V1 -> V2ͷΞοϓσʔτ(1) ReduxपΓͷΞοϓσʔτ͕ਏ͔ͬͨҹ৅

Slide 7

Slide 7 text

REACT-NAVIGATION V2 TO V3 v2 -> v3ͷΞοϓσʔτ

Slide 8

Slide 8 text

▸ 2018೥11݄ࠒʹv3΁Ξοϓσʔτ ▸ RootNavigatorͱͳΔ෦෼ʹcreateAppContainer͕ඞཁʹ ▸ createXNavigatorΛ͢ΔࡍͷnavigationOptionsΛ defaultNavigationOptionsʹมߋ ▸ σϑΥϧτͷഎܠ৭͕നʹมߋ ▸ core෦෼ͳͲ༷ʑͳ΋ͷΛ෼཭ ▸ react-navigation-tabsͳͲΛΘ͟Θ͟import͠ͳͯ͘΋࢖༻Մೳʹ ▸ react-native-webରԠ ▸ v2͔Βv3ʹΞοϓσʔτͨ͠ΒΩϟογϡΛ੾Δඞཁ͕͋Γ ▸ expo : expo start —clear ▸ react native: react-native start —reset-cache V2 -> V3ͷΞοϓσʔτ(1) createAppContainer͕ඞཁͳͷͱɺv2͔Βv3΁ͷΞοϓσʔτ࣌ʹ ΩϟογϡΛ੾Βͳ͍ͱ͍͚ͳ͍ͷ͕஍ຯʹਏ͔ͬͨҹ৅

Slide 9

Slide 9 text

REACT-NAVIGATION V2 TO V3 Authentication flowsʹ͍ͭͯ

Slide 10

Slide 10 text

▸ Authentication flowsͱ͸ʁ ▸ https://reactnavigation.org/docs/en/auth-flow.html ▸ SNSͷΑ͏ͳΞϓϦʹ͓͚Δೝূʹؔ͢ΔྲྀΕ ▸ switchNavigator()Λ࢖࣮ͬͯ૷ AUTHENTICATION FLOWSʹ͍ͭͯ(1) AUTHSTACK MAINSTACK TAKEMODAL CARDSTACK MAIN(TAB) USER POST HOME SEARCH LIKE MYPAGE AUTHLOADING START

Slide 11

Slide 11 text

▸ RootNavigatorΛswitchNavigatorʹ͢Δ͜ͱͰ࣮૷Մೳ AUTHENTICATION FLOWSʹ͍ͭͯ(2) AUTHSTACK MAINSTACK AUTHLOADING ॳظදࣔΛAuthLoadingScreenʹઃఆ

Slide 12

Slide 12 text

▸ AuthLoadingScreenʹ͓͍ͯ ▸ tokenͳͲΛAsyncStorage͔ΒಡΈࠐΜͰϩάΠϯͯ͠Δ͔νΣοΫ AUTHENTICATION FLOWSʹ͍ͭͯ(3) ϩάΠϯ͍ͯͨ͠ΒCardStack΁ MAINSTACK TAKEMODAL MAIN(TAB) AUTHLOADING START CARDSTACK AUTHSTACK CARDSTACK ϩάΠϯ͍ͯ͠ͳ͔ͬͨΒAuthStack΁ CARDSTACK AUTHSTACK

Slide 13

Slide 13 text

▸ NavigationActions.resetΈ͍ͨͳܗͰ࠶ඳը͢Δඞཁ͕ͳ͍ ▸ φϏήʔγϣϯͷ਌ࢠؔ܎ͱ͔Λؾʹ͢Δඞཁ͕ͳ͘ભҠՄೳ ▸ ϩάΞ΢τ͢Δʹ͸this.props.navigation.navigate(“AuthStack”)ͳͲ ▸ ϞʔμϧΛ։͘લͷը໘ʹҰؾʹ໭Γ͍ͨͳͲ AUTHENTICATION FLOWSʹ͍ͭͯ(4) AUTHSTACK MAINSTACK TAKEMODAL CARDSTACK MAIN(TAB) USER POST HOME SEARCH LIKE MYPAGE AUTHLOADING START PUBLISH PUBLISH CARDSTACK

Slide 14

Slide 14 text

·ͱΊ ▸ v2 -> v3΁ͷΞοϓσʔτ͸ɺv1 -> v2ΑΓ΋؆୯ͳҹ৅ ▸ switchNavigatorΛ༻͍ͯAuthentication FlowΛ࡞੒͢Δͱศར ▸ NavigationActions.resetΛ࢖Θͳͯ͘΋OK ▸ this.props.navigation.navigate(“AuthStack”)ͱભҠ͕؆୯ ▸ ͦͷଞ΋Ζ΋Ζ…

Slide 15

Slide 15 text

͓ΘΓ