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
38
react-native-ffmpegを使って動画をいじくりmawasou
watanabeyu
0
720
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.2k
JavaScript製npmパッケージをTypeScriptで書き直した話
watanabeyu
0
1k
React Native Expoで行うアプリの簡単最速運用
watanabeyu
0
300
Other Decks in Technology
See All in Technology
サイバーエージェントにおける生成AIのリスキリング施策の取り組み / cyber-ai-reskilling
cyberagentdevelopers
PRO
2
200
2024-10-30-reInventStandby_StudyGroup_Intro
shinichirokawano
1
630
一休.comレストランにおけるRustの活用
kymmt90
3
580
チームを主語にしてみる / Making "Team" the Subject
ar_tama
4
310
独自ツール開発でスタジオ撮影をDX!「VLS(Virtual LED Studio)」 / dx-studio-vls
cyberagentdevelopers
PRO
1
180
visionOSでの空間表現実装とImmersive Video表示について / ai-immersive-visionos
cyberagentdevelopers
PRO
1
110
Product Engineer Night #6プロダクトエンジニアを育む仕組み・施策
hacomono
PRO
1
470
とあるユーザー企業におけるリスクベースで考えるセキュリティ業務のお話し
4su_para
3
320
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
49k
[JAWS-UG金沢支部×コンテナ支部合同企画]コンテナとは何か
furuton
3
250
君は隠しイベントを見つけれるか?
mujyun
0
290
スプリントゴールにチームの状態も設定する背景とその効果 / Team state in sprint goals why and impact
kakehashi
2
100
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
Measuring & Analyzing Core Web Vitals
bluesmoon
1
40
Practical Orchestrator
shlominoach
186
10k
The Pragmatic Product Professional
lauravandoore
31
6.3k
Building Your Own Lightsaber
phodgson
102
6k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
GraphQLとの向き合い方2022年版
quramy
43
13k
Six Lessons from altMBA
skipperchong
26
3.5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
41
2.1k
A Modern Web Designer's Workflow
chriscoyier
692
190k
What's in a price? How to price your products and services
michaelherold
243
12k
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”)ͱભҠ͕؆୯ ▸ ͦͷଞΖΖ…
͓ΘΓ