react-navigation v2 to v3

react-navigationをv2からv3に変えたときにここら辺をやりましたよ的な感じです。
ついでにAuthentication Flowについても載せました。

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. ͓ΘΓ