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

ReactでWebとNativeの共通UIライブラリを作ろう

Kento Moriwaki
September 13, 2018

 ReactでWebとNativeの共通UIライブラリを作ろう

Kento Moriwaki

September 13, 2018
Tweet

More Decks by Kento Moriwaki

Other Decks in Programming

Transcript

  1. ©2018 Wantedly, Inc. `npm install my-ui`ͯ͠ `import { Button }

    from "my-ui"` ͬͯॻ͍ͨΒ WebͱNativeͰಈ͍ͯཉ͍͠ 6
  2. ©2018 Wantedly, Inc. • ΋ͪΖΜɺreact-native, react-native-web͕ϕʔε • ՄೳͳݶΓ͸ɺreact-primitivesΛ࢖͏ • ͳ͚Ε͹ɺreact-nativeΛ࢖͏

    • ͦΕ΋ͳ͚Ε͹ɺϓϥοτϑΥʔϜ͝ͱʹϩδοΫΛ෼͚Δ → .web.js, .ios.js, .android.js • TypeScriptͷܕཉ͍͠ جຊํ਑
  3. ©2018 Wantedly, Inc. tsconfig͕͍ͬͺ͍Ͱ͖Δ • tsconfig.base.json • جຊϧʔϧΛ·ͱΊΔ • tsconfig.{platform}.json

    • ϓϥοτϑΥʔϜ͝ͱͷઃఆ • rootDir, pathsͳͲ • tsconfig.json • ΤσΟλͰ࢖͏ઐ༻
  4. ©2018 Wantedly, Inc. • distҎԼʹ index.web.js, .ios.js, .android.js ΛͦΕͧΕు͖ग़͢Α͏ʹઃఆ •

    package.jsonͷmainʹ͸ɺdist ͱࢦఆ͢Ε͹ɺΞϓϦέʔγϣϯ ଆͰ੾Γ෼͚ͯ͘ΕΔ Webpack
  5. ©2018 Wantedly, Inc. • ϓϥοτϑΥʔϜ͝ͱͷڍಈͷҧ͍͸ɺmodulesҎԼʹݶ ఆ͢Δ • VS CodeͰॻ͖ͳ͕ΒͷܕνΣοΫ΍ΦʔτίϯϓϦʔτ ͸ɺͲΕ͔ҰͭͷϓϥοτϑΥʔϜʹݻఆ͢Δ

    • modulesΛ௥Ճͨ͠ΒɺwebpackΛ࠶ىಈ͢Δ • resolve.aliasͷॊೈੑ͕௿͍ͨΊɻ΋ͬͱ͍͍ํ๏͋Δ͔ ΋ TypeScript·ΘΓͷ੍ݶ
  6. ©2018 Wantedly, Inc. • nativeͰ͸ɺωΠςΟϒϞδϡʔϧΛؚΉϥΠϒϥϦΛ࢖͏ • https://github.com/react-native-community/react-native-linear-gradient • WebͰ͸ɺCSSͰදݱͰ͖Δ •

    background-image: linear-gradient(...); • ಉ͡ΠϯλʔϑΣʔεΛఆٛͯ͠ɺ࣮૷Λ.web.tsxͱ native.tsxͰ෼͚Δ͚ͩ webͱnativeͰҧ͏άϥσʔγϣϯͷ࣮ݱํ๏