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 について
Search
Yuichi Tateno
May 19, 2017
Technology
3
2k
react-navigation について
React Native Meetup#5 の発表資料です
Yuichi Tateno
May 19, 2017
Tweet
Share
More Decks by Yuichi Tateno
See All by Yuichi Tateno
ユーザのために技術をどう活かすか
hotchpotch
27
20k
GlitchKit
hotchpotch
1
3.3k
クラウドを使った ユーザ向けサービス開発の面白さ
hotchpotch
3
1.1k
pull request を利用した開発ワークフロー
hotchpotch
141
52k
料理を支える技術2012
hotchpotch
10
10k
Other Decks in Technology
See All in Technology
年間一億円削減した時系列データベースのアーキテクチャ改善~不確実性の高いプロジェクトへの挑戦~
lycorptech_jp
PRO
3
2.9k
Git 研修 Advanced【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
200
ゆめみのアクセシビリティの現在地と今後
ryokatsuse
3
290
20240717_イケコパ代表Copilot_in_Teams会社でこう使ってます
ponponmikankan
2
430
LINE WORKSへ簡単通知!Incoming Webhookアプリの紹介
mmclsntr
0
110
開発と事業を繋ぐ!SREのオブザーバビリティ戦略 ~ Developers Summit 2024 Summer ~
leveragestech
0
630
公共領域から学ぶ クラウド移行についてエンジニアが意識していること
kawakawa2222
0
140
Azure AI ことはじめ
tsubakimoto_s
0
130
AI研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
130
GoとアクターモデルでES+CQRSを実践! / proto_actor_es_cqrs
ytake
1
150
スタートアップにおける組織設計とスクラムの長期戦略 / Scrum Fest Kanazawa 2024
yoshikiiida
13
3.6k
テスト・設計研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
Featured
See All Featured
Being A Developer After 40
akosma
72
580k
Imperfection Machines: The Place of Print at Facebook
scottboms
262
13k
The Power of CSS Pseudo Elements
geoffreycrofte
64
5.2k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
12
3.8k
Adopting Sorbet at Scale
ufuk
71
8.8k
[RailsConf 2023] Rails as a piece of cake
palkan
35
4.4k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
20
7.2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
277
13k
A Tale of Four Properties
chriscoyier
155
22k
Making Projects Easy
brettharned
111
5.7k
Pencils Down: Stop Designing & Start Developing
hursman
118
11k
Code Reviewing Like a Champion
maltzj
517
39k
Transcript
react-navigation ʹ ͍ͭͯ React Native Meetup#5 2017/5/19 WAmazing ؘ ༞Ұ
• ؘ ༞Ұ (ηίϯ) • id:secondlife / @hotchpotch • WAmazing
CTO • RN ྺ 2ϲ݄ • WAmazing ͷΞϓϦΛ RN Ͱ࣮த • flux Ͱͳ͍ΞʔΩςΫνϟ • MobX
react-navigation ʹ͍ͭͯ
navigation ϥΠϒϥϦඞཁ? • ը໘ߏ͕গͳ͍ͱେ͛͞ͳෆ ཁ • ඪ४ͷ Navigatitor ͰରԠՄೳ
ΞϓϦ͕ͪΐͬͱେ͖͘ͳΔͱ… • λϒܕ • ελοΫܕ • λϒ + ελοΫܕ •
ྫ֎: Slack ͷΑ͏ͳΞϓϦͰಠࣗߏ
φϏήʔγϣϯΛ࣮͢Δʹ ͨΓɺඞཁͳཁૉ • ը໘Λߏ͢Δ෦ • ԿΛදࣔ͢Δ͔ܾΊΔ෦
ը໘Λߏ͢Δ෦ • stack ͳΒφϏήʔγϣϯόʔ • λΠτϧΔϘλϯɺͦͷଞϘλ ϯ • ओʹϔομʹ࣮͞ΕͯΔ •
tab ͳΒλϒ
ԿΛදࣔ͢Δ͔ܾΊΔ෦ • Router (ͱݺΕΔ࣮) + State ཧ • ελοΫͳΒ stack
(pop/push) ͷߏཧ • λϒͳΒπϦʔߏཧ • deeplink ͔Βͷ෮ݩ • appname://search/Ωʔϫʔυ໊ ΛɺͲͷ ը໘ͰͲ͏දࣔ͢Δͷ͔ʁ • ελοΫͷਂ͍֊͔ΒผͷλϒʹҠΔʹ ?
Ͳ͏ΞϓϦʹφϏήʔγϣϯΛ ΈࠐΉ͔ • ࣗલ࣮ • ઌ΄ͲͷೋͭΛࣗલͰ࣮ • ͘͠1࣮ͭͯ͠ɺ͏1ͭ͋ ΓΛ͏ •
طଘφϏήʔγϣϯϥΠϒϥϦ • ԿΛબఆ͖͔͢
PureJS ϥΠϒϥϦ • react-native-router-flux ˒ 4,391 • redux ͱΈ߹Θͤͯ͏ͳΒҰ൪ ͔ΜͨΜ
• ͘ΘΕ͍ͯΔ • react-navigation ˒4,337 • ࠓͭ͢
ωΠςΟϒ࣮ϥΠϒϥϦ • react-native-navigation ˒3,102 • ωΠςΟϒͷφϏήʔγϣϯͱ݁߹ • Ϗϧυׂ͕ͱେม • native-navigation
˒ 1,963 • AirBnB ۘɻͰ AirBnB Ͱ·ͩͬͯͳ͍ • ͪΐͬͱ͏ʹૣ͗͢Δײ • iOS,Androidͷ࣮ʹৄ͘͠ແ͍ͱτϥϒϧ࣌େ ม
ͲΕ͑ྑ͍ͷʁ • native-navigation ͷ readme.md ʹྑ ͍͜ͱॻ͍ͯ͋ͬͨ
react-navigation • ࠓ಄ʹಥવݱΕͨ(ਖ਼֬ʹ public Խ)͞Εͨ • pure JS ͷφϏήʔγϣϯϥΠϒϥϦ •
ΦϑΟγϟϧ͔ΒϦϯΫ
react-navigation • ࠓ಄ʹಥવݱΕͨ(ਖ਼֬ʹ public Խ)͞Εͨ • pure JS ͷφϏήʔγϣϯϥΠϒϥϦ •
ΦϑΟγϟϧ͔ΒϦϯΫ
react-navigation • ։ൃ͕Μ • 4݄ʹ 1.0.0-beta9 ϦϦʔε • ͜ͷมߋͰɺ݁ߏ API
มߋ͕ߦΘΕ ͨ • ࠓޙ API มߋ͋·ΓݶΓߦΘͣɺ ҆ఆϦϦʔεΛࢦ͢
react-navigation • pureJS Ͱ͋Δ • ωΠςΟϒͷؾ࣋ͪΛߟ͑ͳͯ͘ྑ͍ • JS ͕ղΕࣗલͰͲ͏ʹ͔ग़དྷΔ •
stack / tab / drawer ͳͲجຊతͳφϏήʔγϣ ϯʹରԠ • ૉͷ React ΞʔΩςΫνϟͳΒ͢ΜͳΓ͑Δ • Android ͷόοΫϘλϯʹͪΖΜରԠ
ྫΛݟΔ • examples/ NavigationPlayground • Α͋͘ΔΞϓϦΛߏ͢Δ ػೳͱαϯϓϧ͕Ұ௨Γ • ΧελϜλϒViewͷద༻
deeplink (path) ͷ࣮ ͳͲ • σϞ
Ϋϥεͱ࣮ • RouterΫϥε • TabRouter / StackRouter • NavigationΫϥε •
ͲͷΑ͏ʹϨϯμϦϯά͢Δ͔ • Router + ϨϯμϥʔͱͳΔView(TabView / CardStack ) ͷΈ߹Θͤ • NavigatorΫϥε • ঢ়ଶΛߟྀͭͭ͠ɺ্ೋͭΛ͍͍ײ͡ʹͬͯ͘ ΕΔ
෦ঢ়ଶ (πϦʔ)
redux MobX Ͱѻ͏ • ࣗલ State ཧͷ߹ • redux
MobX ͕ɺNavigator ͷঢ়ଶΛཧ͢Δ • ΠϯςάϨʔτ͢Δ࣮͕ඞཁ • Navigation ͷ state • φϏήʔγϣϯঢ়ଶΛͲ͏͔ͭ • Router ͷ dispatcher • ৽͍͠φϏήʔγϣϯঢ়ଶΛฦ͢
Redux ͷ߹ • ΦϑΟγϟϧͷ Redux Integration υ Ωϡϝϯτ • ϨϙδτϦ෦ͷ
examples/redux
MobX ͷ߹ • MobX Integration Guide • ೦ͳ͕Β PR ͕
Close ͞Εͨ • http://bit.ly/2pI2u7W • “react-navigation-mobx-example” • ࢲ͕࡞ͬͨαϯϓϧ • NavigationStore ͱ࣮ͯ͠ • ͖ͬ͞ͷσϞ͜Ε
( ͦͦ MobX ͱ ... ) • ObserverʹΑΔঢ়ଶཧͷΞϓϩʔν • flux
ͷΑ͏ͳΞʔΩςΫνϟ “Ͱͳ ͍” • Hello, MobX! • http://leader22.github.io/slides/ node_gakuen-25/
࣮ΞϓϦͰͬͯΈͨײ • φϏήʔγϣϯͷ state ΛͲ͏ѻ͏͔ ҙࣝͰ͖Δͱॴ·Ͱཧղ͢Δͱɺେମ ࢥͬͨ௨Γʹಈ͘Α͏ʹ • ≒λϒ x
ελοΫͷπϦʔߏΛͲ͏ ѻ͏͔͕ϙΠϯτ
react-navigation ʹ͍ͭͯ • ૉͷ ReactNative (state + props ) ͳΒ͢Μͳ
Γ͑Δ • PureJS ͳͷָ • Redux MobX ͷ߹ɺॳظֶशίετ͕͔ ͔Δ • ·ͩؾܰʹ͑ΔܗͰແ͍ • ͕ɺग़ͯ·ͩ4ϲ݄ͳͷͰɺࠓޙΤίγες Ϝ͕ͲΜͲΜվળ͞Εͦ͏