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
430
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
npm packageとリリースとモノレポ
watanabeyu
0
41
react-native-ffmpegを使って動画をいじくりmawasou
watanabeyu
0
730
react-native-unimodulesを用いてのApp内課金実装
watanabeyu
0
1k
gandhの紹介です
watanabeyu
0
26
XcodeやAndroid Studioを弄らないアイコン管理
watanabeyu
2
590
Firebaseオンリー + React Nativeでアプリを作ると果たして簡単になるのか?
watanabeyu
4
1.2k
react-native-unimodulesのススメ
watanabeyu
1
6.3k
JavaScript製npmパッケージをTypeScriptで書き直した話
watanabeyu
0
1k
React Native Expoで行うアプリの簡単最速運用
watanabeyu
0
300
Other Decks in Technology
See All in Technology
"君は見ているが観察していない"で考えるインシデントマネジメント
grimoh
4
970
VPC間の接続方法を整理してみた #自治体クラウド勉強会
non97
1
1.1k
AI長期記憶システム構築のための LLMマルチエージェントの取り組み / Awarefy-LLM-Multi-Agent
iktakahiro
2
280
プロポーザルのつくり方 〜個人技編〜 / How to come up with proposals
ohbarye
4
300
ZOZOTOWNでの推薦システム活用事例の紹介
f6wbl6
1
430
Forget efficiency – Become more productive without the stress
ufried
0
230
Amazon_CloudWatch_ログ異常検出_導入ガイド
tsujiba
4
1.8k
形式手法の 10 メートル手前 #kernelvm / Kernel VM Study Hokuriku Part 7
ytaka23
5
710
コンテナのトラブルシューティング目線から AWS SAW についてしゃべってみる
kazzpapa3
1
120
ドメイン名の終活について - JPAAWG 7th -
mikit
18
9.6k
20241108_CS_LLMMT
shigashiyama
0
220
ZOZOTOWNのホーム画面をパーソナライズすることの難しさと裏話を語る
f6wbl6
1
430
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
810
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
The Pragmatic Product Professional
lauravandoore
31
6.3k
Docker and Python
trallard
40
3.1k
Keith and Marios Guide to Fast Websites
keithpitt
409
22k
Agile that works and the tools we love
rasmusluckow
327
21k
Scaling GitHub
holman
458
140k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
329
21k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
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”)ͱભҠ͕؆୯ ▸ ͦͷଞΖΖ…
͓ΘΓ