react-navigation v2 to v3

Transcript

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

2. ▸ ࣗݾ঺հ ▸ react-navigationͱ͸ʁ ▸ v1 -> v2ͷΞοϓσʔτ ▸ v2

   -> v3ͷΞοϓσʔτ ▸ Authentication flowsʹ͍ͭͯ ▸ ·ͱΊ ֓ཁ

3. ࣗݾ঺հ(1) Θͨͳ΂Ώ͏ ▸ ॴଐ ▸ גࣜձࣾg&h ▸ Web / ΞϓϦΛझຯͰެ։

   ▸ ࢓ࣄ಺༰ ▸ αʔό / ϑϩϯτ / ΞϓϦ / Web ▸ ΞΧ΢ϯτ ▸ Twitter : @hmktsu ▸ Github : @watanabeyu ࣮ફExpo͍ͬͯ͏ຊΛڞஶͰ2018೥12݄ʹग़൛

4. ࣗݾ঺հ(2) ▸ https://www.gandh.jp ▸ 3໊(ΤϯδχΞ͸ࣗ෼Ұਓ)Ͱฏۉ೥ྸ30൒͹ͷγχΞձࣾ ▸ ΤϯλϝܥʹಛԽͨ͠αʔϏεΛओʹӡӦ ▸ ݱࡏͷϝΠϯࣄۀɿhttps://www.weddyweddy.net ▸

   μϯαʔ޲͚ͷϓϥοτϑΥʔϜܥSNSΞϓϦ ▸ ͪ͜ΒͰνϣΠεͨ͠གྷΓ΍͍͢30ඵఔ౓ͷۂͰགྷͬͯಈըΛΞοϓ

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

6. ▸ 2018೥5݄ࠒʹv2΁Ξοϓσʔτ ▸ redux෦෼Λ෼཭(createReduxBoundAddListenerͷഇࢭͳͲ) ▸ NavigationActionsͷҰ෦͕StackActionsʹมߋ ▸ StackNavigator({…})ͳͲ͕createStackNavigator({…})ʹมߋ ▸ navigation.push()Λ࢖ͬͯεΫϦʔϯͷॏͳΓΛ͢ΔΑ͏ʹมߋ

   ▸ bottomTabNavigatorΛΧελϜ͍ͨ͠৔߹͸ɺreact-navigation-tabs Λimport͢ΔΑ͏ʹ V1 -> V2ͷΞοϓσʔτ(1) ReduxपΓͷΞοϓσʔτ͕ਏ͔ͬͨҹ৅

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

8. ▸ 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΁ͷΞοϓσʔτ࣌ʹ ΩϟογϡΛ੾Βͳ͍ͱ͍͚ͳ͍ͷ͕஍ຯʹਏ͔ͬͨҹ৅

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

10. ▸ 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

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

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

    AUTHLOADING START CARDSTACK AUTHSTACK CARDSTACK ϩάΠϯ͍ͯ͠ͳ͔ͬͨΒAuthStack΁ CARDSTACK AUTHSTACK

13. ▸ 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

14. ·ͱΊ ▸ v2 -> v3΁ͷΞοϓσʔτ͸ɺv1 -> v2ΑΓ΋؆୯ͳҹ৅ ▸ switchNavigatorΛ༻͍ͯAuthentication FlowΛ࡞੒͢Δͱศར

    ▸ NavigationActions.resetΛ࢖Θͳͯ͘΋OK ▸ this.props.navigation.navigate(“AuthStack”)ͱભҠ͕؆୯ ▸ ͦͷଞ΋Ζ΋Ζ…

15. ͓ΘΓ