Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
react-navigation v2 to v3
Search
Yu Watanabe
January 17, 2019
Technology
0
450
react-navigation v2 to v3
react-navigationをv2からv3に変えたときにここら辺をやりましたよ的な感じです。
ついでにAuthentication Flowについても載せました。
Yu Watanabe
January 17, 2019
Tweet
Share
More Decks by Yu Watanabe
See All by Yu Watanabe
Bolt 🤝 Expo
watanabeyu
0
340
npm packageとリリースとモノレポ
watanabeyu
0
64
react-native-ffmpegを使って動画をいじくりmawasou
watanabeyu
0
940
react-native-unimodulesを用いてのApp内課金実装
watanabeyu
0
1.1k
gandhの紹介です
watanabeyu
0
35
XcodeやAndroid Studioを弄らないアイコン管理
watanabeyu
2
660
Firebaseオンリー + React Nativeでアプリを作ると果たして簡単になるのか?
watanabeyu
4
1.3k
react-native-unimodulesのススメ
watanabeyu
1
6.5k
JavaScript製npmパッケージをTypeScriptで書き直した話
watanabeyu
0
1.1k
Other Decks in Technology
See All in Technology
Biz職でもDifyでできる! 「触らないAIワークフロー」を実現する方法
igarashikana
2
670
技育祭2025【秋】 企業ピッチ/登壇資料(高橋 悟生)
hacobu
PRO
0
120
CoRL 2025 Survey
harukiabe
1
220
「れきちず」のこれまでとこれから - 誰にでもわかりやすい歴史地図を目指して / FOSS4G 2025 Japan
hjmkth
1
320
GoでもGUIアプリを作りたい!
kworkdev
PRO
0
150
Databricks AI/BI Genie の「値ディクショナリー」をAmazonの奥地(S3)まで見に行く
kameitomohiro
1
290
Introdução a Service Mesh usando o Istio
aeciopires
0
220
Digitization部 紹介資料
sansan33
PRO
1
5.6k
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
14k
Railsの話をしよう
yahonda
0
160
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
940
React19.2のuseEffectEventを追う
maguroalternative
2
520
Featured
See All Featured
Scaling GitHub
holman
463
140k
How to Think Like a Performance Engineer
csswizardry
27
2.1k
Facilitating Awesome Meetings
lara
56
6.6k
Code Reviewing Like a Champion
maltzj
526
40k
How to Ace a Technical Interview
jacobian
280
24k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Six Lessons from altMBA
skipperchong
29
4k
Side Projects
sachag
455
43k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
Transcript
2019/01/17 ΘͨͳΏ͏ REACT-NAVIGATION V2 TO V3
▸ ࣗݾհ ▸ react-navigationͱʁ ▸ v1 -> v2ͷΞοϓσʔτ ▸ v2
-> v3ͷΞοϓσʔτ ▸ Authentication flowsʹ͍ͭͯ ▸ ·ͱΊ ֓ཁ
ࣗݾհ(1) ΘͨͳΏ͏ ▸ ॴଐ ▸ גࣜձࣾg&h ▸ Web / ΞϓϦΛझຯͰެ։
▸ ࣄ༰ ▸ αʔό / ϑϩϯτ / ΞϓϦ / Web ▸ ΞΧϯτ ▸ Twitter : @hmktsu ▸ Github : @watanabeyu ࣮ફExpo͍ͬͯ͏ຊΛڞஶͰ201812݄ʹग़൛
ࣗݾհ(2) ▸ https://www.gandh.jp ▸ 3໊(ΤϯδχΞࣗҰਓ)Ͱฏۉྸ30ͷγχΞձࣾ ▸ ΤϯλϝܥʹಛԽͨ͠αʔϏεΛओʹӡӦ ▸ ݱࡏͷϝΠϯࣄۀɿhttps://www.weddyweddy.net ▸
μϯαʔ͚ͷϓϥοτϑΥʔϜܥSNSΞϓϦ ▸ ͪ͜ΒͰνϣΠεͨ͠གྷΓ͍͢30ඵఔͷۂͰགྷͬͯಈըΛΞοϓ
REACT-NAVIGATION V2 TO V3 v1 -> v2ͷΞοϓσʔτ
▸ 20185݄ࠒʹv2Ξοϓσʔτ ▸ redux෦Λ(createReduxBoundAddListenerͷഇࢭͳͲ) ▸ NavigationActionsͷҰ෦͕StackActionsʹมߋ ▸ StackNavigator({…})ͳͲ͕createStackNavigator({…})ʹมߋ ▸ navigation.push()ΛͬͯεΫϦʔϯͷॏͳΓΛ͢ΔΑ͏ʹมߋ
▸ bottomTabNavigatorΛΧελϜ͍ͨ͠߹ɺreact-navigation-tabs Λimport͢ΔΑ͏ʹ V1 -> V2ͷΞοϓσʔτ(1) ReduxपΓͷΞοϓσʔτ͕ਏ͔ͬͨҹ
REACT-NAVIGATION V2 TO V3 v2 -> v3ͷΞοϓσʔτ
▸ 201811݄ࠒʹ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ͷΞοϓσʔτ࣌ʹ ΩϟογϡΛΒͳ͍ͱ͍͚ͳ͍ͷ͕ຯʹਏ͔ͬͨҹ
REACT-NAVIGATION V2 TO V3 Authentication flowsʹ͍ͭͯ
▸ 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
▸ RootNavigatorΛswitchNavigatorʹ͢Δ͜ͱͰ࣮Մೳ AUTHENTICATION FLOWSʹ͍ͭͯ(2) AUTHSTACK MAINSTACK AUTHLOADING ॳظදࣔΛAuthLoadingScreenʹઃఆ
▸ AuthLoadingScreenʹ͓͍ͯ ▸ tokenͳͲΛAsyncStorage͔ΒಡΈࠐΜͰϩάΠϯͯ͠Δ͔νΣοΫ AUTHENTICATION FLOWSʹ͍ͭͯ(3) ϩάΠϯ͍ͯͨ͠ΒCardStack MAINSTACK TAKEMODAL MAIN(TAB)
AUTHLOADING START CARDSTACK AUTHSTACK CARDSTACK ϩάΠϯ͍ͯ͠ͳ͔ͬͨΒAuthStack CARDSTACK AUTHSTACK
▸ 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
·ͱΊ ▸ v2 -> v3ͷΞοϓσʔτɺv1 -> v2ΑΓ؆୯ͳҹ ▸ switchNavigatorΛ༻͍ͯAuthentication FlowΛ࡞͢Δͱศར
▸ NavigationActions.resetΛΘͳͯ͘OK ▸ this.props.navigation.navigate(“AuthStack”)ͱભҠ͕؆୯ ▸ ͦͷଞΖΖ…
͓ΘΓ