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
42
react-native-ffmpegを使って動画をいじくりmawasou
watanabeyu
0
750
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
スクラムチームを立ち上げる〜チーム開発で得られたもの・得られなかったもの〜
ohnoeight
2
350
VideoMamba: State Space Model for Efficient Video Understanding
chou500
0
190
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
3.8k
マルチプロダクトな開発組織で 「開発生産性」に向き合うために試みたこと / Improving Multi-Product Dev Productivity
sugamasao
1
300
TanStack Routerに移行するのかい しないのかい、どっちなんだい! / Are you going to migrate to TanStack Router or not? Which one is it?
kaminashi
0
590
Application Development WG Intro at AppDeveloperCon
salaboy
0
190
【令和最新版】AWS Direct Connectと愉快なGWたちのおさらい
minorun365
PRO
5
750
複雑なState管理からの脱却
sansantech
PRO
1
140
AIチャットボット開発への生成AI活用
ryomrt
0
170
Taming you application's environments
salaboy
0
190
EventHub Startup CTO of the year 2024 ピッチ資料
eventhub
0
110
Python(PYNQ)がテーマのAMD主催のFPGAコンテストに参加してきた
iotengineer22
0
470
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
409
22k
Teambox: Starting and Learning
jrom
133
8.8k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
The Cult of Friendly URLs
andyhume
78
6k
Scaling GitHub
holman
458
140k
Designing on Purpose - Digital PM Summit 2013
jponch
115
7k
Rails Girls Zürich Keynote
gr2m
94
13k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
370
4 Signs Your Business is Dying
shpigford
180
21k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
329
21k
Building Better People: How to give real-time feedback that sticks.
wjessup
364
19k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
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”)ͱભҠ͕؆୯ ▸ ͦͷଞΖΖ…
͓ΘΓ