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
320
npm packageとリリースとモノレポ
watanabeyu
0
64
react-native-ffmpegを使って動画をいじくりmawasou
watanabeyu
0
920
react-native-unimodulesを用いてのApp内課金実装
watanabeyu
0
1.1k
gandhの紹介です
watanabeyu
0
34
XcodeやAndroid Studioを弄らないアイコン管理
watanabeyu
2
650
Firebaseオンリー + React Nativeでアプリを作ると果たして簡単になるのか?
watanabeyu
4
1.2k
react-native-unimodulesのススメ
watanabeyu
1
6.5k
JavaScript製npmパッケージをTypeScriptで書き直した話
watanabeyu
0
1.1k
Other Decks in Technology
See All in Technology
隙間時間で爆速開発! Claude Code × Vibe Coding で作るマニュアル自動生成サービス
akitomonam
3
250
S3 Glacier のデータを Athena からクエリしようとしたらどうなるのか/try-to-query-s3-glacier-from-athena
emiki
0
140
生成AI時代におけるAI・機械学習技術を用いたプロダクト開発の深化と進化 #BetAIDay
layerx
PRO
1
970
2025-07-31: GitHub Copilot Agent mode at Vibe Coding Cafe (15min)
chomado
2
340
大規模イベントに向けた ABEMA アーキテクチャの遍歴 ~ Platform Strategy 詳細解説 ~
nagapad
0
180
【CEDEC2025】大規模言語モデルを活用したゲーム内会話パートのスクリプト作成支援への取り組み
cygames
PRO
2
740
Nx × AI によるモノレポ活用 〜コードジェネレーター編〜
puku0x
0
280
AI時代の経営、Bet AI Vision #BetAIDay
layerx
PRO
1
1.6k
データエンジニアがクラシルでやりたいことの現在地
gappy50
3
840
Bet "Bet AI" - Accelerating Our AI Journey #BetAIDay
layerx
PRO
4
1.4k
経理出身PdMがAIプロダクト開発を_ハンズオンで学んだ話.pdf
shunsukenarita
1
300
金融サービスにおける高速な価値提供とAIの役割 #BetAIDay
layerx
PRO
1
690
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Practical Orchestrator
shlominoach
190
11k
Being A Developer After 40
akosma
90
590k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
The Pragmatic Product Professional
lauravandoore
36
6.8k
The Cost Of JavaScript in 2023
addyosmani
51
8.7k
Agile that works and the tools we love
rasmusluckow
329
21k
GraphQLとの向き合い方2022年版
quramy
49
14k
Music & Morning Musume
bryan
46
6.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
A Tale of Four Properties
chriscoyier
160
23k
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”)ͱભҠ͕؆୯ ▸ ͦͷଞΖΖ…
͓ΘΓ