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
710
ドラッカー風エクササイズを導入して エンジニアチームの相互理解を促進した話
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
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
YesSQL, Process and Tooling at Scale
rocio
172
14k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Producing Creativity
orderedlist
PRO
344
39k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
Site-Speed That Sticks
csswizardry
4
390
How STYLIGHT went responsive
nonsquared
98
5.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
Designing for humans not robots
tammielis
250
25k
Building Applications with DynamoDB
mza
93
6.2k
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ग़ྗ
͝੩ௌ͋Γ͕ͱ͏͍͟͝· ͨ͠ʂ