Upgrade to Pro — share decks privately, control downloads, hide ads and more …

react-navigation v2 to v3

Yu Watanabe
January 17, 2019

react-navigation v2 to v3

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

Yu Watanabe

January 17, 2019
Tweet

More Decks by Yu Watanabe

Other Decks in Technology

Transcript

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

    -> v3ͷΞοϓσʔτ ▸ Authentication flowsʹ͍ͭͯ ▸ ·ͱΊ ֓ཁ
  2. ࣗݾ঺հ(1) Θͨͳ΂Ώ͏ ▸ ॴଐ ▸ גࣜձࣾg&h ▸ Web / ΞϓϦΛझຯͰެ։

    ▸ ࢓ࣄ಺༰ ▸ αʔό / ϑϩϯτ / ΞϓϦ / Web ▸ ΞΧ΢ϯτ ▸ Twitter : @hmktsu ▸ Github : @watanabeyu ࣮ફExpo͍ͬͯ͏ຊΛڞஶͰ2018೥12݄ʹग़൛
  3. ▸ 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΁ͷΞοϓσʔτ࣌ʹ ΩϟογϡΛ੾Βͳ͍ͱ͍͚ͳ͍ͷ͕஍ຯʹਏ͔ͬͨҹ৅
  4. ·ͱΊ ▸ v2 -> v3΁ͷΞοϓσʔτ͸ɺv1 -> v2ΑΓ΋؆୯ͳҹ৅ ▸ switchNavigatorΛ༻͍ͯAuthentication FlowΛ࡞੒͢Δͱศར

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