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
370
ReactNativeで勉強会のビューワーアプリを作ってみて学んだ知見
masarufuruya
November 29, 2017
Tweet
Share
More Decks by masarufuruya
See All by masarufuruya
DevOpsに投資するリソースの無いスタートアップがふりかえりを改革して自己組織化されたチームへ近づいてる話
masarufuruya
1
1.5k
SQL利用者を3倍に増やしデータの民主化を推進した話.pdf
masarufuruya
0
790
BigQuery Scriptingを利用してCloudSQLのテーブルを転送する仕組みを作った話
masarufuruya
0
44
未経験からデータエンジニアに チャレンジして学んだ大切なこと
masarufuruya
0
720
ドラッカー風エクササイズを導入して エンジニアチームの相互理解を促進した話
masarufuruya
0
1.4k
Watsonを使って音声入力できるVRブレストアプリを作っている話
masarufuruya
0
470
非SPAで小さく始めるReactアーキテクチャ
masarufuruya
1
1.4k
ReactNativeでIOSアプリのプッシュ通知を実装する
masarufuruya
0
1.3k
Web+スマホ+VRで一人ブレストアプリを作ってみた
masarufuruya
0
250
Featured
See All Featured
Being A Developer After 40
akosma
89
590k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Code Reviewing Like a Champion
maltzj
521
39k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Statistics for Hackers
jakevdp
797
220k
Site-Speed That Sticks
csswizardry
4
390
Building Applications with DynamoDB
mza
93
6.2k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Automating Front-end Workflow
addyosmani
1368
200k
How STYLIGHT went responsive
nonsquared
98
5.4k
Faster Mobile Websites
deanohume
306
31k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.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ग़ྗ
͝੩ௌ͋Γ͕ͱ͏͍͟͝· ͨ͠ʂ