Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

4bf9f85356f5a7c959b73f19f4c0df37?s=47 masarufuruya
November 29, 2017
190

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

4bf9f85356f5a7c959b73f19f4c0df37?s=128

masarufuruya

November 29, 2017
Tweet

More Decks by masarufuruya

Transcript

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

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

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

  4. ͜Μͳ͜ͱ͸ࠓճ͸࿩͠·ͤΜ ◦ ReactNative, Reduxʹؔ͢Δجૅతͳ࿩ ◦ ࣮ࡍͷϦϦʔεʹ޲͚ͨௐ੔ͷ࿩

  5. ࠓճಋೖͨ͠ϥΠϒϥϦ ◦ react-native ◦ axios ◦ redux ◦ redux-saga ◦

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

    react-navigation redux֎ͷ෭࡞༻Λ୲౰ ը໘ભҠΛ୲౰ɻWebͰ΋࢖͑Δ ঢ়ଶมߋͷͨΊͷϧʔϧΛܾΊΔ શମͷϕʔε
  7. ॲཧͷྲྀΕ View Action ඇಉظॲཧ Store Reducer Saga Πϕϯτൃੜ ඞཁʹԠͯ͡SagaΛ్தʹڬΉ ΠϕϯτΛ౉͢

    ঢ়ଶΛߋ৽ ϏϡʔΛ࠶ඳը
  8. ॲཧͷྲྀΕ View Action ඇಉظॲཧ Store Reducer Πϕϯτൃੜ ඞཁʹԠͯ͡SagaΛ్தʹڬΉ ΠϕϯτΛ౉͢ ঢ়ଶΛߋ৽

    ϏϡʔΛ࠶ඳը Saga
  9. σϞ

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

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

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

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

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

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

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

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

  18. ͝੩ௌ͋Γ͕ͱ͏͍͟͝· ͨ͠ʂ