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
ReactNativeで勉強会のビューワーアプリを作ってみて学んだ知見
Search
masarufuruya
November 29, 2017
0
390
ReactNativeで勉強会のビューワーアプリを作ってみて学んだ知見
masarufuruya
November 29, 2017
Tweet
Share
More Decks by masarufuruya
See All by masarufuruya
DevOpsに投資するリソースの無いスタートアップがふりかえりを改革して自己組織化されたチームへ近づいてる話
masarufuruya
1
1.6k
SQL利用者を3倍に増やしデータの民主化を推進した話.pdf
masarufuruya
0
830
BigQuery Scriptingを利用してCloudSQLのテーブルを転送する仕組みを作った話
masarufuruya
0
56
未経験からデータエンジニアに チャレンジして学んだ大切なこと
masarufuruya
0
750
ドラッカー風エクササイズを導入して エンジニアチームの相互理解を促進した話
masarufuruya
1
1.4k
Watsonを使って音声入力できるVRブレストアプリを作っている話
masarufuruya
0
490
非SPAで小さく始めるReactアーキテクチャ
masarufuruya
1
1.4k
ReactNativeでIOSアプリのプッシュ通知を実装する
masarufuruya
0
1.3k
Web+スマホ+VRで一人ブレストアプリを作ってみた
masarufuruya
0
270
Featured
See All Featured
Code Review Best Practice
trishagee
69
19k
Facilitating Awesome Meetings
lara
54
6.4k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Docker and Python
trallard
44
3.5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Building an army of robots
kneath
306
45k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Side Projects
sachag
455
42k
The Invisible Side of Design
smashingmag
301
51k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Transcript
ReactNativeͰษڧձͷϏϡʔϫ ʔΞϓϦΛ࡞ͬͯΈֶͯΜͩݟ ݹՈ େ
ࣗݾհ ݹՈ େ (@enzerubank) ϑϦʔϥϯε ϑϩϯτΤϯυΤϯδχΞ ωΠςΟϒ(Swift, Kotlin)ͷࣝθϩ ࣄͰReactNativeͷΞϓϦ։ൃΛΔ͜ͱʹʂ
ࠓճͷൃදͰ͢͜ͱ ◦ ࣮ͰֶΜͩReactNativeͷϕʔεͷΞʔ ΩςΫνϟΛαϯϓϧΛݩʹ͠·͢
͜Μͳ͜ͱࠓճ͠·ͤΜ ◦ ReactNative, Reduxʹؔ͢Δجૅతͳ ◦ ࣮ࡍͷϦϦʔεʹ͚ͨௐͷ
ࠓճಋೖͨ͠ϥΠϒϥϦ ◦ react-native ◦ axios ◦ redux ◦ redux-saga ◦
react-navigation
ࠓճಋೖͨ͠ϥΠϒϥϦ ◦ react-native ◦ axios ◦ redux ◦ redux-saga ◦
react-navigation redux֎ͷ෭࡞༻Λ୲ ը໘ભҠΛ୲ɻWebͰ͑Δ ঢ়ଶมߋͷͨΊͷϧʔϧΛܾΊΔ શମͷϕʔε
ॲཧͷྲྀΕ View Action ඇಉظॲཧ Store Reducer Saga Πϕϯτൃੜ ඞཁʹԠͯ͡SagaΛ్தʹڬΉ ΠϕϯτΛ͢
ঢ়ଶΛߋ৽ ϏϡʔΛ࠶ඳը
ॲཧͷྲྀΕ View Action ඇಉظॲཧ Store Reducer Πϕϯτൃੜ ඞཁʹԠͯ͡SagaΛ్தʹڬΉ ΠϕϯτΛ͢ ঢ়ଶΛߋ৽
ϏϡʔΛ࠶ඳը Saga
σϞ
redux-sagaͷ֓ཁ • Root͕λεΫΛForkͯ͠ฒྻॲཧΛ࣮ݱ͢Δ • λεΫৗʹΠϕϯτͷൃੜΛͭ Fork RootSaga Call Take HomeScreenSaga
redux-sagaͰActionΛड͚औΔ • takeͰϢʔβʔͷΫϦοΫΠϕϯτΛݕ • ΠϕϯτΛऔಘ͢ΔؔΛ࣮ߦ
redux-sagaͰॲཧΛ࣮ߦ͢Δ • callͰΠϕϯτͷऔಘ • putͰऔಘ߲ͨ͠ͰReducerΛߋ৽͢Δ
react-navigationʹΑΔը໘ભҠ • Ұཡͷ্ʹهࣄৄࡉը໘Λදࣔ • StackNavigationΛར༻
ExpoͰಈ࡞֬ೝ (հ͖͠Εͳ͍ͷͰ) • QRίʔυ͔Βμϯϩʔυ • Ұ௨Γͷಈ͖͕࣮ػͰࢼͤΔ https://expo.io/@react-navigation/NavigationPlayground
react-navigation+Reduxͷҙ • Quick Start௨ΓͰ্ख͍͔͘ͳ͍ • Reduxͱͷ࿈ܞφϏ༻ͷReducer͕ඞཁ ※ https://reactnavigation.org/docs/guides/redux
WebViewʹ͍ͭͯ • ৄࡉը໘ཁૉ͕ଟ͍ͷͰར༻ • ࠓճγϯϓϧʹURLಡΈࠐΈ • AndroidChromeͰදࣔ͢Δ ※ Chromeͷํ͕ύϑΥʔϚϯε͕ྑ͍Β͍͠ (ৄ͍͠ํͥͻڭ͍͑ͯͩ͘͞)
※
ࠓޙऔΓΈ͍ͨ͜ͱ ◦ ਤɾΧϝϥػೳΛͬͨΞϓϦ։ൃ ◦ SketchσʔλͷReactNativeग़ྗ
͝੩ௌ͋Γ͕ͱ͏͍͟͝· ͨ͠ʂ