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

React NativeでCross Platform対応を頑張る話

tkow
March 04, 2021

React NativeでCross Platform対応を頑張る話

RNJ20210304

tkow

March 04, 2021
Tweet

More Decks by tkow

Other Decks in Programming

Transcript

  1. 1SPKFDUߏ੒ ᵓᴷᴷ3&"%.&NE ᵓᴷᴷMFSOBKTPO ᵓᴷᴷQBDLBHFKTPO ᵓᴷᴷQBDLBHFT ᴹᵓᴷᴷBENJODMJ ᴹᵓᴷᴷBENJOVUJMT ᴹᵓᴷᴷCBDLFOE ᴹᵓᴷᴷDPSF ᴹᵓᴷᴷNPCJMF

    ᴹᵓᴷᴷDSPTTQMBUGPSN ᴹᵋᴷᴷXFC ᵓᴷᴷUTDPO fi HKTPO ᵓᴷᴷZBSOFSSPSMPH ᵋᴷᴷZBSOMPDL MFSOBʹΑΔ.POP3FQPߏ੒ ͜͜ʹ$SPTT1MBUGPSN༻ͷϩδοΫͱ ίϯϙʔωϯτΛߏ੒͢Δ͜ͱʹ
  2. 5ZQFTDSJQUରԠ "paths": { "~": ["./"], "~/*": ["./*", "./*.native", "./*.ios", "./*.android"],

    ɹ } w ΤσΟλʹղੳͤ͞ΔͨΊɺϓϥοτϑΥʔϜ͝ͱʹಡ·ͤΔ֦ுࢠΛࢦఆ͢Δɻ 
 ʢUZQFTDSJQUʹ͸XFCQBDLͷΑ͏ͳSFTPMWFFYUFOTJPOɾNPEVMFNFSHFͷΑ͏ ͳػೳ͕ͳ͘ɺQBUITͰࢦఆͨ͠NPEVMFύεҎ֎ͰSFTPMWFFYUFOTJPO͕Ͱ͖ͳ ͍૬ରύεͰ͸FYUFOTJPOΛলུͯ͠NPEVMFϚʔδ͢Δࣄ͕Ͱ͖ͳ͍ʣ w ͜ͷΑ͏ͳ෼ذΛ࣋ͭϥΠϒϥϦΛ࡞Ζ͏ͱ͢Δ৔߹ɺBMJBT fi MFQMBUGPSNKTͷ֊૚Ͱ SFRVJSF BMJBTQBUI ͷܗͰు͖ग़͞ΕΔͨΊXFCQBDL΍NFUSPͳͲCVOEMFS͕ඞཁʹͳΔ
  3. TUZMFEDPNQPOFOUT TUZMFEDPNQPOFOUTΛ࠾༻ͨ͠ ϝϦοτ w TUZMFEDPNQPOFOUT͸8FCͱ/BUJWFͰผʑͷ5IFNF1SPWJEFSΛ౉ͤΔͷͰɺ 
 UIFNFͷUIFNFQSPQFSUZͷ݁߹Λߟ͑Δඞཁ͕ͳ͍ w 8FCଆͰ΋࠾༻͍ͯ͠Ε͹ɺίϯϙʔωϯτΛҠ২͠΍͍͢ σϝϦοτ

    w 4UZMF4IFFUΛ࢖͏ΑΓ΋ύϑΥʔϚϯε͕ͪΐͬͱѱ͘ͳΔ w ΞχϝʔγϣϯͷTUBUFΛѻ͏ͱύϑΥʔϚϯε͕མͪΔ 
 3/8FCͰ͸"OJNBUFE7JFX͸DTTͱผ؅ཧʹͳΔͷͰӨڹ͸গͳ͍  w ࠷৽ͷ3FBDU/BUJWFͷίϯϙʔωϯτͷ௥ै͸ϥΠϒϥϦ͕ߋ৽͞Ε͍ͯͳ͍ 
 ͜ͱ͕͋ΓखಈͰઃఆ͢Δඞཁ͕͋Δ͕࣌͋Δ TUZMFE $PNQPOFOU ͰରԠՄೳ 
 ͳ΋ͷ΋͋Δ͕ɺͷ1SFTTBCMFͷTUZMFGVODUJPOQSPQʹରԠ͍ͯ͠ͳ͍ͳͲ 
 ͰύονΛೖΕΔඞཁ͕͋ͬͨ 

  4. #BCFMͷઃఆ ύοέʔδଆ module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: [ [

    'styled-components', { ssr: true, displayName: true, preprocess: false } ], ], env: { test: { plugins: ['styled-jsx/babel-test'], }, }, }
  5. $SPTT1MBUGPSNؒͷελΠϧௐ੔ w DTTඪ४ͷ૬ର஋ࢦఆ SFN FN ͸8FCͰ͸ධՁ͞ΕΔ͕ɺϞόΠϧଆͰ͸ 
 SFBDUOBUJWFϥΠϒϥϦ͚ͩͰ͸Ͱ͖ͳ͍ɻ 
 ʢIUUQTHJUIVCDPNWJUBMFUTSFBDUOBUJWFFYUFOEFETUZMFTIFFUͱ͍͏

    
 ϥΠϒϥϦͰSFN͕ରԠ͍ͯ͠Δ͕ɺଟػೳ͔ͭ/BUJWFͷͨΊͷ࣮૷Ͱ8FC 
 ͷ࢓༷ͱဃ཭͢Δͷ͕޷·͘͠ͳ͍ͨΊࠓճ͸ෆ࠾༻ɻ w SFN͚ͩͲ͏ʹ͔ରԠ͔ͨͬͨ͠ͷͰɺTUZMFEͷUFNQMBUFGVODUJPOʹUIFNF 
 ରԠͯ͠ຒΊࠐΉ͜ͱʹɻ XFCଆͷSFTQPOTJWFରԠ͸SFN TUZMFEͷFYUFOE 
 Ͱؤு͍ͬͯ͘
  6. $SPTT1MBUGPSNؒͷελΠϧௐ੔ SFN export type DeviceFontSizeType = | 'xxsmall' | 'xsmall'

    | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' export const DEFAULT_FONT_SIZE: Record<DeviceFontSizeType, number> = { xxsmall: 8, xsmall: 10, small: 14, medium: 16, large: 20, xlarge: 24, xxlarge: 40, } export const rem = (relativeSize: number) => { return ({ theme }: { theme: ThemeScheme }): string => `${theme.fontSize * relativeSize}px` } ࢖༻ྫ) font-size: ${rem(1)}; UFNQMBUFϦςϥϧʹຒΊࠐΉͨΊʹݱࡏͷGPOU4J[FΛ 
 ฦ͢DMPTVSFΛ࡞ΓɺSFNͷ୅ସʹͨ͠
  7. $SPTT1MBUGPSNؒͷελΠϧௐ੔ ϝσΟΞΫΤϦ export const reactMediaQuery:ɹMediaQueryType = { xl: { maxWidth:

    1440, minWidth: 1170, },… } export const useDeviceSize = (): DeviceFontSizeType => { const matches = useMedia({ queries: reactMediaQuery }) return useMemo(() => { if (matches.lg) return 'large' if (matches.md) return 'medium' if (matches.sm) return 'small' if (matches.xsm) return 'xsmall' if (matches.xxsm) return 'xxsmall' return 'xlarge' }, [matches]) } 8&#ଆ͸ඞཁͳαΠζ·ͰͰ 
 ϝσΟΞΫΤϦΛରԠ
  8. $SPTT1MBUGPSNؒͷελΠϧௐ੔ ϝσΟΞΫΤϦ export const WebAdjustText = styled(NativeText)` white-space: pre-line; line-height:

    1.5em; ` 8&#ଆͰσόΠεαΠζ͕߹Θͳ͍৔߹΍૬ର஋ͳͲΛ࢖͍͍ͨ৔߹͸ 
 QSPQFSUZΛPWFSSJEF͢Δ
  9. 4UPSZCPPL export const DarkThemeDecorator = ( story: () => React.ReactNode,

    ): ReactElement => { const colorTheme = select('colorTheme', colorThemeSelect, 'dark') const mediaSize = select('mediaSize', deviceSizeSelect, 'medium') return ( <ThemeProvider theme={{ colors: themes['colors'][colorTheme], spacers: themes['spacers'][mediaSize], fontSize: themes['fontSize'][mediaSize], }} > <View style={{ flex: 1, backgroundColor: '#222' }}>{story()}</View> </ThemeProvider> ) /BUVSBMDMBS͞ΜͷϨϙΛࢀߟʹ͠·ͨ͠IUUQTHJUIVCDPN/BUVSBMDMBSSFBDUOBUJWFTLFUDICPPLUSFFNBTUFSTSD w !TUPSZCPPLBEEPOLOPCTͰ5IFNFมߋΛ6*ͰͰ͖ΔΑ͏ʹ࢓ࠐΉ
  10. $SPTT1MBUGPSNରԠ͕೉͍͠ͱ͜Ζ w 3FBDU/BUJWFͱίʔυϕʔεΛڞ༗͠ͳ͍৔߹ɺ/BWJHBUJPOͷڞ௨Խ͕ωοΫʹͳΔ /FYUKTͳͲ ͷ8FCϑϨʔϜϫʔΫΛ࢖͏ͱSFBDUOBWJHBUJPOͳͲ͸ར༻͢Δͷ͕೉͍͠ͷͰ 
 ผ࣮૷ͷํ͕ૣ͘ରԠՄೳ  w %FQSJDBUFEʹͳ͍ͬͯΔίϯϙʔωϯτͷରԠʢSFBDUOBUJWFXFCίϯϙʔωϯτ͕༻ҙ͞Εͯ

    ͍ͳ͍/BUJWF$PNQPOFOU"1*ΛݺͿͱΤϥʔʹͳΔɻʣҰԠ!UZQFTSFBDUOBUJWF͔Βফ͑Δ· Ͱ͸࢖͏ࣄͰରԠͨ͠ํ͕ίετ͕௿͍ɻϥΠϒϥϦ͕੾Γग़͞Ε͍ͯΔ͚ͩͰ͋Ε͹ɺBMJBTͰϥ ΠϒϥϦ໊ΛSFBDUOBUJWFXFCʹ޲͚Ε͹େৎ෉Ͱ͢ɻͦ͏Ͱͳ͚Ε͹ࣗ෼Ͱ/BUJWF 
 $PNQPOFOUͷొ࿥͕ඞཁʹͳΓ·͢ɻ w TWHͷίϯϙʔωϯτ͸8FCͰ͸࢖͍ͮΒ͍ͷͰڞ௨ԽͤͣʹSBX fi MFΛ࢖ͬͯରԠ͢Δ 
 ͷ͕Αͦ͞͏ ϞόΠϧଆͰ͸SFBDUOBUJWFTWHMPBEFS 8FCଆͰ͸TWHΛͦͷ··JNQPSU͢ΔͳͲ ͷܗʹ͢Δɻ੩తϑΝΠϧΛTUPSBHFʹอଘ͍ͨ͠৔߹͸޻෉͕ඞཁ