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
2.1k
react-navigation について
React Native Meetup#5 の発表資料です
Yuichi Tateno
May 19, 2017
Tweet
Share
More Decks by Yuichi Tateno
See All by Yuichi Tateno
Ask! NIKKEI RAG検索技術の深層
hotchpotch
14
3.1k
ユーザのために技術をどう活かすか
hotchpotch
27
20k
GlitchKit
hotchpotch
1
3.4k
クラウドを使った ユーザ向けサービス開発の面白さ
hotchpotch
3
1.2k
pull request を利用した開発ワークフロー
hotchpotch
141
52k
料理を支える技術2012
hotchpotch
10
11k
Other Decks in Technology
See All in Technology
スタートアップ1人目QAエンジニアが QAチームを立ち上げ、“個”からチーム、 そして“組織”に成長するまで / How to set up QA team at reiwatravel
mii3king
2
1.5k
Data-centric AI入門第6章:Data-centric AIの実践例
x_ttyszk
1
400
TAMとre:Capセキュリティ編 〜拡張脅威検出デモを添えて〜
fujiihda
2
240
Building Products in the LLM Era
ymatsuwitter
10
5.4k
飲食店予約台帳を支えるインタラクティブ UI 設計と実装
siropaca
7
1.7k
Classmethod AI Talks(CATs) #17 司会進行スライド(2025.02.19) / classmethod-ai-talks-aka-cats_moderator-slides_vol17_2025-02-19
shinyaa31
0
110
現場で役立つAPIデザイン
nagix
33
12k
MC906491 を見据えた Microsoft Entra Connect アップグレード対応
tamaiyutaro
1
540
2024.02.19 W&B AIエージェントLT会 / AIエージェントが業務を代行するための計画と実行 / Algomatic 宮脇
smiyawaki0820
13
3.3k
室長と気ままに学ぶマイクロソフトのビジネスアプリケーションとビジネスプロセス
ryoheig0405
0
360
なぜ私は自分が使わないサービスを作るのか? / Why would I create a service that I would not use?
aiandrox
0
720
目の前の仕事と向き合うことで成長できる - 仕事とスキルを広げる / Every little bit counts
soudai
24
7k
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Being A Developer After 40
akosma
89
590k
How to Ace a Technical Interview
jacobian
276
23k
Designing Experiences People Love
moore
140
23k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
Fireside Chat
paigeccino
34
3.2k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
174
51k
Bash Introduction
62gerente
611
210k
Documentation Writing (for coders)
carmenintech
67
4.6k
A Philosophy of Restraint
colly
203
16k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
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ϲ݄ͳͷͰɺࠓޙΤίγες Ϝ͕ͲΜͲΜվળ͞Εͦ͏