react-navigation v2 to v3

254ef4587f3c010fc0c52517ff5514c2?s=47 Yu Watanabe
January 17, 2019

react-navigation v2 to v3

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

254ef4587f3c010fc0c52517ff5514c2?s=128

Yu Watanabe

January 17, 2019
Tweet

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