ReactNativeで勉強会のビューワーアプリを作ってみて学んだ知見

by masarufuruya

Slide 1

Slide 1 text

ReactNativeͰษڧձͷϏϡʔϫ ʔΞϓϦΛ࡞ͬͯΈֶͯΜͩ஌ݟ ݹՈ େ

Slide 2

Slide 2 text

ࣗݾ঺հ ݹՈ େ (@enzerubank) ϑϦʔϥϯε ϑϩϯτΤϯυΤϯδχΞ ωΠςΟϒ(Swift, Kotlin)ͷ஌ࣝ͸θϩ ࢓ࣄͰReactNativeͷΞϓϦ։ൃΛ΍Δ͜ͱʹʂ

Slide 3

Slide 3 text

ࠓճͷൃදͰ࿩͢͜ͱ ○ ࣮຿ͰֶΜͩReactNativeͷϕʔεͷΞʔ ΩςΫνϟΛαϯϓϧΛݩʹ࿩͠·͢

Slide 4

Slide 4 text

͜Μͳ͜ͱ͸ࠓճ͸࿩͠·ͤΜ ○ ReactNative, Reduxʹؔ͢Δجૅతͳ࿩ ○ ࣮ࡍͷϦϦʔεʹ޲͚ͨௐ੔ͷ࿩

Slide 5

Slide 5 text

ࠓճಋೖͨ͠ϥΠϒϥϦ ○ react-native ○ axios ○ redux ○ redux-saga ○ react-navigation

Slide 6

Slide 6 text

ࠓճಋೖͨ͠ϥΠϒϥϦ ○ react-native ○ axios ○ redux ○ redux-saga ○ react-navigation redux֎ͷ෭࡞༻Λ୲౰ ը໘ભҠΛ୲౰ɻWebͰ΋࢖͑Δ ঢ়ଶมߋͷͨΊͷϧʔϧΛܾΊΔ શମͷϕʔε

Slide 7

Slide 7 text

ॲཧͷྲྀΕ View Action ඇಉظॲཧ Store Reducer Saga Πϕϯτൃੜ ඞཁʹԠͯ͡SagaΛ్தʹڬΉ ΠϕϯτΛ౉͢ ঢ়ଶΛߋ৽ ϏϡʔΛ࠶ඳը

Slide 8

Slide 8 text

ॲཧͷྲྀΕ View Action ඇಉظॲཧ Store Reducer Πϕϯτൃੜ ඞཁʹԠͯ͡SagaΛ్தʹڬΉ ΠϕϯτΛ౉͢ ঢ়ଶΛߋ৽ ϏϡʔΛ࠶ඳը Saga

Slide 9

Slide 9 text

σϞ

Slide 10

Slide 10 text

redux-sagaͷ֓ཁ • Root͕λεΫΛForkͯ͠ฒྻॲཧΛ࣮ݱ͢Δ • λεΫ͸ৗʹΠϕϯτͷൃੜΛ଴ͭ Fork RootSaga Call Take HomeScreenSaga

Slide 11

Slide 11 text

redux-sagaͰActionΛड͚औΔ • takeͰϢʔβʔͷΫϦοΫΠϕϯτΛݕ஌ • ΠϕϯτΛऔಘ͢Δؔ਺Λ࣮ߦ

Slide 12

Slide 12 text

redux-sagaͰॲཧΛ࣮ߦ͢Δ • callͰΠϕϯτͷऔಘ • putͰऔಘ߲ͨ͠໨ͰReducerΛߋ৽͢Δ

Slide 13

Slide 13 text

react-navigationʹΑΔը໘ભҠ • Ұཡͷ্ʹهࣄৄࡉը໘Λදࣔ • StackNavigationΛར༻

Slide 14

Slide 14 text

ExpoͰಈ࡞֬ೝ (঺հ͖͠Εͳ͍ͷͰ) • QRίʔυ͔Βμ΢ϯϩʔυ • Ұ௨Γͷಈ͖͕࣮ػͰࢼͤΔ https://expo.io/@react-navigation/NavigationPlayground

Slide 15

Slide 15 text

react-navigation+Reduxͷ஫ҙ఺ • Quick Start௨ΓͰ͸্ख͍͔͘ͳ͍ • Reduxͱͷ࿈ܞ͸φϏ༻ͷReducer͕ඞཁ ※ https://reactnavigation.org/docs/guides/redux

Slide 16

Slide 16 text

WebViewʹ͍ͭͯ • ৄࡉը໘͸ཁૉ͕ଟ͍ͷͰར༻ • ࠓճ͸γϯϓϧʹURLಡΈࠐΈ • Android͸ChromeͰදࣔ͢Δ ※ Chromeͷํ͕ύϑΥʔϚϯε͕ྑ͍Β͍͠ (ৄ͍͠ํͥͻڭ͍͑ͯͩ͘͞) ※

Slide 17

Slide 17 text

ࠓޙऔΓ૊Έ͍ͨ͜ͱ ○ ஍ਤɾΧϝϥػೳΛ࢖ͬͨΞϓϦ։ൃ ○ SketchσʔλͷReactNativeग़ྗ

Slide 18

Slide 18 text

͝੩ௌ͋Γ͕ͱ͏͍͟͝· ͨ͠ʂ