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

Web オンリーのプロダクトでも React Native for Web は輝く/react...

sawa-zen
October 02, 2021
1.6k

Web オンリーのプロダクトでも React Native for Web は輝く/react-native-web

React Native Matsuri 2021 で登壇した資料です
https://reactnative-matsuri.com/ja

sawa-zen

October 02, 2021
Tweet

Transcript

  1. ࢥ͍ग़ͯ͠ཉ͍͠ ⛔ Write once, run anywhere ✅ Learn Once, Write

    Anywhere @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 11
  2. React Na(ve for Web Λ ७ਮͳ Web ͷ UI ϥΠϒϥϦͱͯ͠

    ݟΔͱͲ͏͔ʁ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 15
  3. Good points ① ϛχϚϧͰચ࿅͞Εͨઃܭ • View, Text Ͱ UI ΛߏஙͰ͖Δγϯϓϧ͞

    • div, span, pͳͲͰॻ͘ΑΓ΋௚ײత • ίϯϙʔωϯτ͕ҙঊΛ൐Θͳ͍ • ಠࣗʹελΠϧΛ౰ͯΔ͔ଞͷϥΠϒϥϦʹ৐Δ͔બ΂Δ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 17
  4. Good points ② ௚ײతͳ Accessibility ؔ࿈ͷهड़ܗࣜ • role Λઃఆ͢Ε͹ద੾ͳ DOM

    ʹม׵ͯ͘͠ΕΔ • View, Text ͰҰ୴ελΠϦϯά͚͔ͩͯ͠Β accessibility* prop Λޙ෇͚ͰରԠͰ͖Δ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 18
  5. Good points ③ ॏෳͨ͠ CSS ͷ࠷దԽ • ҎԼͷ৚݅Λຬͨͨ͠ style ͷ

    CSS ͸࢖͍ճ͞ΕΔ 1. StyleSheet.create Λ࢖ͬͯهड़͞Ε͍ͯΔ͜ͱ 2. ಉ͡ͷ key ͱ value ͷϖΞ͕ଞͰ࢖ΘΕ͍ͯΔ͜ͱ • Tailwind ͱ͍ۙײ֮ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 19
  6. ফ໣ points ① media query ͕ RN ʹແ͍ • react-responsive

    ͳͲΛ࢖͑͹͍ۙ͜ͱ͸Ͱ͖Δ • SSR ΍ SSG ͷॳճඳըͰ͸ը໘෯͕Θ͔Βͳ͍ • ϥΠϯλΠϜ࣌ʹॲཧ͞ΕϨΠΞ΢τγϑτ͕ى͜Δ • LP ΍ ίʔϙϨʔταΠτʹ͸޲͍͍ͯͳ͍ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 23
  7. ফ໣ points ② ٙࣅΫϥε͕ RN ʹແ͍ • CSS ͷ :hover,

    :focus ͳͲ͕࢖͑ͳ͍ • ϒϥ΢β͸Ϛ΢εૢ࡞ɺΩʔϘʔυૢ࡞͕લఏͳͷͰΫϦςΟ Χϧ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 24
  8. ফ໣ points ② ͷղܾࡦ: ϋϯυϥΛ࢖͏ • ࣮͸ RN for Web

    ͕ಠࣗϋϯυϥΛ௥Ճͯ͘͠Ε͍ͯΔ • onHoverIn, onHoverOut • onFocus, onBlur • ͨͩܕʹ͸ແ͍ͷͰ֦ு͢Δඞཁ͋Γ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 25
  9. ফ໣ points ③ position: fixed; ͕ RN ʹແ͍ • ܕΤϥʔʹͳΔ

    • any ΍ as Ͱಀ͛ͨ͘ͳΔ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 27
  10. ফ໣ points ③ ͷղܾࡦ1: ઃܭΛݟ௚͢ ͜Εʹૺ۰ͨ͠৔߹͸ҎԼͷ֬ೝΛͨ͠ํ͕ྑͦ͞͏ 1. absolute ͡ΌͩΊͳͷ͔? 2.

    Modal ίϯϙʔωϯτͰղܾ͠ͳ͍͔? 3. ReactDOM ͷ portal Λղܾ͠ͳ͍͔? @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 28
  11. ফ໣ points ③ ͷղܾࡦ2: ܕͷΦʔόʔϥΠυ import 'react-native' declare module 'react-native'

    { interface ViewStyle { position: 'relative' | 'absolute' | 'fixed' } } @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 29
  12. ফ໣ points ④ linear-gradient ͕ RN ʹແ͍ • ҰൠతʹݟΔҎԼॻ͖ํΛͯ͠΋൓ө͞Εͳ͍ •

    background: 'linear-gradient(#00F, #F00)' @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 30
  13. ফ໣ points ④ ͷղܾࡦ: backgroundImage Λ࢖͏ • linear-gradient() ͸ͦ΋ͦ΋ը૾σʔλܕΒ͍͠ •

    url() ͱಉ༷ backgroundImage: 'linear-gradient(#00F, #F00)' @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 31
  14. ফ໣ points ͸ࠓޙղফ͞ΕΔ͔΋ • React GUIͷొ৔Ͱঢ়گ͕มΘΓͦ͏ • ফ໣ point ͸΄΅ղܾ͞Εͦ͏งғؾ

    • RN ʹ࢓༷͕౷߹͞ΕΔ or React GUI ͕ಠཱͯ͠ϦϦʔε͞ ΕΔະདྷ͕͍͔ͭ͘Δ @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 33
  15. ·ͱΊ • React Na(ve for Web ͸ web-only Ͱ΋ OK

    • Web ༻ UI ϥΠϒϥϦͱͯ͠༏लͰ͋Δ • ଟগͷফ໣͸൐͏͕ͳΜͱ͔ͳΓͦ͏ • React GUI ʹظ଴ " @sawa-zen (2021/10/2) React Na4ve Matsuri 2021 35