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
740
ドラッカー風エクササイズを導入して エンジニアチームの相互理解を促進した話
masarufuruya
0
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
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Balancing Empowerment & Direction
lara
1
370
Into the Great Unknown - MozCon
thekraken
39
1.9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
KATA
mclloyd
29
14k
It's Worth the Effort
3n
185
28k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
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ग़ྗ
͝੩ௌ͋Γ͕ͱ͏͍͟͝· ͨ͠ʂ