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

ULPX 3FBDU/BUJWFͰ$SPTT 1MBUGPSNΛؤுΔ࿩

1SPGJMF ίʔϙϨʔταΠτIUUQTNPDIJDPSQDPN ϑϦʔϥϯε͔Β ڞಉ૑ۀऀͱͱ΋ʹ ๏ਓ੒Γͨ͠ձࣾͰ   $50΍͍ͬͯ·͢ डୗ։ൃΛ΍Γͳ͕Β   3/Ͱࣗࣾ։ൃΛͯ͠·͢
  ಉ໊ͷձ͕ࣾ͋ΔͷͰ   ؒҧ͍ʹؾΛ͚͍ͭͯͩ͘͞ 4&0ͷऑ͍ํͷ.0$)*Ͱ͢  

$SPTT1MBUGPSNରԠͷϞνϕʔγϣϯ ࣗࣾ։ൃͰ࡞͍ͬͯΔΞϓϦέʔγϣϯΛٸᬎϞόΠϧ"QQʹ͍ͨ͠ w ϓϩτλΠϓͰ࡞ͬͨΞϓϦΛϨεϙϯγϒରԠ͢Δʹ͋ͨͬͯͲ͏ͤϞόΠ ϧΞϓϦ΋ͭ͘ΔͳΒ3FBDU/BUJWF8FC࢖ͬͯΈ·͔͢ͱ͍͏ϊϦͰ͢ w ΋͏8FCͰ͋Δఔ౓࡞ͬͯ͠·ͬͨ͠ɺ෦෼తʹ3FBDU/BUJWF8FCίϯϙ ʔωϯτΛ࡞੒͠ஔ͖׵͑Δࣄʹ w Ͳ͏ͤͳΒࠓޙ΋༷ʑͳγʔϯͰ࢖͑Δ͍͚ͯΔίϯϙʔωϯτϥΠϒϥϦΛ
࡞Ζ͏ͱ͍͏͜ͱͰNPOPSFQPʹQBDLBHFΛੜ΍ͯ͠Έͨ

3FBDU/BUJWF8FC w 3FBDU/BUJWF͕FYQPSU͍ͯ͠ΔϞδϡʔϧ಺ͷ࣮૷ͷΠϯλʔϑΣʔεʹ฿ ͬͯಉ͡ه๏Ͱ8&#Ͱ࢖͑ΔίϯϙʔωϯτΛ࣮૷ͨ͠ϥΠϒϥϦ w ͜ΕʹΑͬͯιʔείʔυ্ͷ*NQPSUdGSPNbSFBDUOBUJWF`ΛίϯύΠϧ࣌ ʹSFBDUOBUJWFXFCʹࠩ͠ସ͑Δͱ͍͏࢓૊ΈͰ/BUJWF$PNQPOFOUͰ͸ͳ ͘3FBDU/BUJWF8FC$PNQPOFOUʹεΠονͰ͖ΔʢCBCFM XFCQBDLͳͲ ͷBMJBTΛ༻͍Δʣ
w ࣮૷͸શͯXFCͷ"1*ͷൣғͰ࣮૷͞Ε͍ͯΔͷͰSFBDUOBUJWFύοέʔδ͸ ඞཁͳ͍

3FBDU/BUJWF8FC w ύοέʔδͱͯ͠ίϯϙʔωϯτΛCVJMEͯ͠࢖͏   ɹCBCFM౳ͰUSBOTQJMFͯ͠ϥΠϒϥϦԽ͢ΔPSUSBOTQJMFʹ   ɹύοέʔδ಺ͷίʔυΛ഑ஔͯ͠ר͖ࠐΉ w ࠷ॳ͔Β3FBDU/BUJWFͱซ༻͢Δ  
ɹOQYDSFBUFSFBDUOBUJWFXFCBQQ"QQ/BNF ηοςΟϯά̎ύλʔϯ

3FBDU/BUJWF8FC w ύοέʔδͱͯ͠ίϯϙʔωϯτΛCVJMEͯ͠࢖͏   ɹCBCFM౳ͰUSBOTQJMFͯ͠ϥΠϒϥϦԽ͢ΔPSUSBOTQJMFʹ   ɹύοέʔδ಺ͷίʔυΛ഑ஔͯ͠ר͖ࠐΉ w ࠷ॳ͔Β3FBDU/BUJWFͱซ༻͢Δ  
ɹOQYDSFBUFSFBDUOBUJWFXFCBQQ"QQ/BNF ηοςΟϯά̎ύλʔϯ ͬͪ͜ͷ࿩Λ͠·͢

1SPKFDUߏ੒ ᵓᴷᴷ3&"%.&NE ᵓᴷᴷMFSOBKTPO ᵓᴷᴷQBDLBHFKTPO ᵓᴷᴷQBDLBHFT ᴹᵓᴷᴷBENJODMJ ᴹᵓᴷᴷBENJOVUJMT ᴹᵓᴷᴷCBDLFOE ᴹᵓᴷᴷDPSF ᴹᵓᴷᴷNPCJMF
ᴹᵓᴷᴷDSPTTQMBUGPSN ᴹᵋᴷᴷXFC ᵓᴷᴷUTDPO fi HKTPO ᵓᴷᴷZBSOFSSPSMPH ᵋᴷᴷZBSOMPDL MFSOBʹΑΔ.POP3FQPߏ੒ ͜͜ʹ$SPTT1MBUGPSN༻ͷϩδοΫͱ ίϯϙʔωϯτΛߏ੒͢Δ͜ͱʹ

5ZQFTDSJQUରԠ w !UZQFTSFBDUOBUJWFΛJOTUBMM͢Ε͹BMJBT͕ઃఆ͞Ε͍ͯͯ΋!UZQFT SFBDUOBUJWFͷܕఆٛΛಡΜͰ͘ΕΔͷͰ͜ΕΛར༻͢Δ w SFBDUOBUJWFXFCʹ͸ܕఆ͕ٛͳ͍ͷͰɺQMBUGPSN෼ذͰSFBDUOBUJWF XFCΛ௚઀ݺͼग़͍ͨ͠৔߹͸ɺQBDLBHFKTPOͷEFW%FQFOEFODJFTʹ   \  
!UZQFTSFBDUOBUJWFXFCOQN!UZQFTSFBDUOBUJWF   ^   ͱهड़͢ΔͱSFBDUOBUJWFͷܕఆٛΛSFBDUOBUJWFXFCͷܕͱͯ͠ಡΜͰ͘ ΕΔͷͰඞཁͳ৔߹͸ઃఆ͢Δ

5ZQFTDSJQUରԠ "paths": { "~": ["./"], "~/*": ["./*", "./*.native", "./*.ios", "./*.android"],
ɹ } w ΤσΟλʹղੳͤ͞ΔͨΊɺϓϥοτϑΥʔϜ͝ͱʹಡ·ͤΔ֦ுࢠΛࢦఆ͢Δɻ   ʢUZQFTDSJQUʹ͸XFCQBDLͷΑ͏ͳSFTPMWFFYUFOTJPOɾNPEVMFNFSHFͷΑ͏ ͳػೳ͕ͳ͘ɺQBUITͰࢦఆͨ͠NPEVMFύεҎ֎ͰSFTPMWFFYUFOTJPO͕Ͱ͖ͳ ͍૬ରύεͰ͸FYUFOTJPOΛলུͯ͠NPEVMFϚʔδ͢Δࣄ͕Ͱ͖ͳ͍ʣ w ͜ͷΑ͏ͳ෼ذΛ࣋ͭϥΠϒϥϦΛ࡞Ζ͏ͱ͢Δ৔߹ɺBMJBT fi MFQMBUGPSNKTͷ֊૚Ͱ SFRVJSF BMJBTQBUI ͷܗͰు͖ग़͞ΕΔͨΊXFCQBDL΍NFUSPͳͲCVOEMFS͕ඞཁʹͳΔ

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ʹରԠ͍ͯ͠ͳ͍ͳͲ   ͰύονΛೖΕΔඞཁ͕͋ͬͨ  

#BCFMͷઃఆ ύοέʔδଆ w /BUJWFͷґଘੑอͭͨΊʹ͸3FBDU/BUJWFͷίϯϙʔωϯτʹ ͸NFUSPSFBDUOBUJWFCBCFMQSFTFU͔CBCFMQSFTFUFYQPΛར ༻ͯ͠CVJME͢Δ   ͨͩ͠ɺFYQPQSFTFU͸DMBTT/BNFΛॻ͖׵͑Δઃఆ͕͋ΔΒ ͘͠ɺTUZMFEDPNQPOFOUTͷTTSઃఆͱڝ߹͢ΔͬΆ͘ "OJNBUFE7JFXʹTUZMF͕͔ͭͳ͘ͳΔόά͕͋ΔΑ͏ͳͷͰ
  NFUSPSFBDUOBUJWFCBCFMQSFTFUΛ࠾༻

#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'], }, }, }

XFCQBDLͷઃఆ ར༻ଆ config.resolve.alias = { 'react-native$': require.resolve('react-native-web'), } w 8&#༻ʹBQQMJDBUJPOΛCVJME͢Δͱ͖͸ɺSFBDUOBUJWFύοέʔδͷJNQPSUΛ
  SFBDUOBUJWFXFCύοέʔδʹஔ͖׵͑ΔΑ͏ʹ͢Δ

XFCQBDLͷઃఆ ར༻ଆ w ͞ΒʹUSFFTIBLJOHͷԸܙΛड͚ΔͨΊʹNPOPSFQPͷΑ͏ʹUSBOTQJMFલͷ   ίʔυΛ௚઀ಡΈ͍ͨ৔߹͸XFCQBDLͷCVJMEUBSHFUʹϑΝΠϧΛొ࿥͢Δ   ඞཁ͕͋ΔɻʢಛʹTUZMFEDPNQPOFOUTOBUJWFͷΑ͏ʹ಺෦ʹSFBDUOBUJWF   ͷJNQPSU͕ଘࡏ͍ͯ͠ΔͷͰɺ[email protected]಺ʹ͋ͬͯ΋CVJME࣌ʹ͜ΕΛ
  SFBDUOBUJWFXFCʹࠩ͠ସ͑ͳ͍ͱΤϥʔʹͳΔʣ

XFCQBDLͷઃఆ ར༻ଆ w ࠓճ͸/FYUKTΞϓϦʹίϯϙʔωϯτΛҠ২͢Δํ๏Λࢼͨ͠ͷͰ   OFYUUSBOTQJMFNPEVMFTΛ༻͍ͯɺ෦[email protected]ͷதͰ΋USBOTQJMF   ର৅ʹؚΊΔύοέʔδΛઃఆͨ͠ XFCQBDL͸VTFTͷઃఆͰௐ੔ const
withTM = require('next-transpile-modules') ([ '@example_package/cross-platform’, 'styled-components/native', 'react-native-vector-icons' ]);

$SPTT1MBUGPSNؒͷελΠϧௐ੔ w DTTඪ४ͷ૬ର஋ࢦఆ SFN FN ͸8FCͰ͸ධՁ͞ΕΔ͕ɺϞόΠϧଆͰ͸   SFBDUOBUJWFϥΠϒϥϦ͚ͩͰ͸Ͱ͖ͳ͍ɻ   ʢIUUQTHJUIVCDPNWJUBMFUTSFBDUOBUJWFFYUFOEFETUZMFTIFFUͱ͍͏
  ϥΠϒϥϦͰSFN͕ରԠ͍ͯ͠Δ͕ɺଟػೳ͔ͭ/BUJWFͷͨΊͷ࣮૷Ͱ8FC   ͷ࢓༷ͱဃ཭͢Δͷ͕޷·͘͠ͳ͍ͨΊࠓճ͸ෆ࠾༻ɻ w SFN͚ͩͲ͏ʹ͔ରԠ͔ͨͬͨ͠ͷͰɺTUZMFEͷUFNQMBUFGVODUJPOʹUIFNF   ରԠͯ͠ຒΊࠐΉ͜ͱʹɻ XFCଆͷSFTQPOTJWFରԠ͸SFN TUZMFEͷFYUFOE   Ͱؤு͍ͬͯ͘

$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ͷ୅ସʹͨ͠

$SPTT1MBUGPSNؒͷελΠϧௐ੔ ϝσΟΞΫΤϦ w XFCଆͷڞ௨Խ͞Ε͍ͯͳ͍ίϯϙʔωϯτͷελΠϧΛ/BUJWFͱ߹Θͤ   ͨΓɺͦ΋ͦ΋αΠζʹΑͬͯ/BUJWFίϯϙʔωϯτΛࠩ͠ସ͍͑ͨ࣌ͷ   ͨΊʹϝσΟΞΫΤϦΛ࢖͏ʢແཧʹ/BUJWFίϯϙʔωϯτͱσόΠεͷج४   αΠζΛ߹ΘͤΔඞཁ͸ͳ͍͕ɺ'POUTJ[F͸߹Θͤͨํ͕ແ೉ʣ
w DSPTTQMBUGPSNଆ͸SFN͕ݻఆαΠζͰFYQPSU͞ΕΔͷͰɺ͜Ε͕Ͳ͏ͯ͠΋   ࠔΔ৔߹͸TUZMFEDPNQPOFOUTOBUJWFͰFYUFOEͱTUZMFENFEJBRVFSZΛ   ۦ࢖ͯ͠ελΠϧΛ্ॻ͖ͯ͠ௐ੔͢Δ

$SPTT1MBUGPSNؒͷελΠϧௐ੔ ϝσΟΞΫΤϦ 8&#ͷϝσΟΞΫΤϦରԠ wIUUQTHJUIVCDPN3FBDU5SBJOJOHSFBDUNFEJB wIUUQTHJUIVCDPNNPSBKBCJTUZMFENFEJBRVFSZ Λ࢖ͬͯؤுΔɻͨͩ͠ɺEFWJDFαΠζͷࢦఆͷํ๏͕ҧ͏ͷͰந৅Խͯ͠KTPONR ಉ͡ύϥϝʔλΛऔΕΔΑ͏ʹͨ͠ /BUJWFͷϝσΟΞΫΤϦରԠ const windowWidth
= Dimensions.get('window').width; const windowHeight = Dimensions.get('window').height; Λ͔ͭͬͯɺσόΠεαΠζΛ෼ྨ͢ΔϩδοΫΛॻ͚͹0,

$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&#ଆ͸ඞཁͳαΠζ·ͰͰ   ϝσΟΞΫΤϦΛରԠ

$SPTT1MBUGPSNؒͷελΠϧௐ੔ ϝσΟΞΫΤϦ export const WebAdjustText = styled(NativeText)` white-space: pre-line; line-height:
1.5em; ` 8&#ଆͰσόΠεαΠζ͕߹Θͳ͍৔߹΍૬ର஋ͳͲΛ࢖͍͍ͨ৔߹͸   QSPQFSUZΛPWFSSJEF͢Δ

4UPSZCPPL w 3FBDU/BUJWF8FCͰ͸8FCϒϥ΢βͰදࣔͰ͖ΔͷͰɺTUPSZCPPL   ͷWJFXQPSUͰը໘αΠζΛ͔֬Ίͳ͕Β։ൃ͢Δͷ͕ศར w 3FBDU/BUJWFͷϙΠϯταΠζ͸04ґଘͷ6*Ͱ͸ͳ͍ݶΓઈରࢦఆʹͳΔͷͰɺ   7JFX1PSUͷݟͨ໨͸ը໘αΠζ͕ಉ͡Ͱ͋Ε͹ɺ8FCͰ΋ɺ.PCJMFͰ΋ಉ͡  
ϨΠΞ΢τʹͳΔ

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*ͰͰ͖ΔΑ͏ʹ࢓ࠐΉ

4UPSZCPPL

3FBDU/BUJWFͰ8FCରԠͯ͠ྑ͔ͬͨ఺ w 3FBDU/BUJWF8FCࣗମ͕ϨεϙϯγϒରԠ͠΍͍͔ͭ͢ߴػೳͳ6*ϥΠϒϥ ϦͳͷͰɺίϯϙʔωϯτࣗମͷ࣮૷ָ͕ʹͳΔ΋ͷ͕͋Δ .PEBM 4OBDLCBSͳͲ w $44Ͱॻ͚ΔͷͰҠ২͕εϜʔζʹ͍͘΋ͷ΋ଟ͍
w Ұ౓ΧλϩάΛ࡞ͬͯ͠·͑͹8&# .PCJMFͰ࢖͍ଓ͚ΒΕΔίϯϙʔωϯ τ͕࡞ΕΔ

$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ʹอଘ͍ͨ͠৔߹͸޻෉͕ඞཁ

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

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

tkow

More Decks by tkow

Other Decks in Programming

Featured

Transcript

ULPX 3FBDU/BUJWFͰ$SPTT 1MBUGPSNΛؤுΔ࿩

1SPGJMF ίʔϙϨʔταΠτIUUQTNPDIJDPSQDPN ϑϦʔϥϯε͔Β ڞಉ૑ۀऀͱͱ΋ʹ ๏ਓ੒Γͨ͠ձࣾͰ   $50΍͍ͬͯ·͢ डୗ։ൃΛ΍Γͳ͕Β   3/Ͱࣗࣾ։ൃΛͯ͠·͢

3FBDU/BUJWF8FC w ύοέʔδͱͯ͠ίϯϙʔωϯτΛCVJMEͯ͠࢖͏   ɹCBCFM౳ͰUSBOTQJMFͯ͠ϥΠϒϥϦԽ͢ΔPSUSBOTQJMFʹ   ɹύοέʔδ಺ͷίʔυΛ഑ஔͯ͠ר͖ࠐΉ w ࠷ॳ͔Β3FBDU/BUJWFͱซ༻͢Δ

3FBDU/BUJWF8FC w ύοέʔδͱͯ͠ίϯϙʔωϯτΛCVJMEͯ͠࢖͏   ɹCBCFM౳ͰUSBOTQJMFͯ͠ϥΠϒϥϦԽ͢ΔPSUSBOTQJMFʹ   ɹύοέʔδ಺ͷίʔυΛ഑ஔͯ͠ר͖ࠐΉ w ࠷ॳ͔Β3FBDU/BUJWFͱซ༻͢Δ

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

5ZQFTDSJQUରԠ w !UZQFTSFBDUOBUJWFΛJOTUBMM͢Ε͹BMJBT͕ઃఆ͞Ε͍ͯͯ΋!UZQFT SFBDUOBUJWFͷܕఆٛΛಡΜͰ͘ΕΔͷͰ͜ΕΛར༻͢Δ w SFBDUOBUJWFXFCʹ͸ܕఆ͕ٛͳ͍ͷͰɺQMBUGPSN෼ذͰSFBDUOBUJWF XFCΛ௚઀ݺͼग़͍ͨ͠৔߹͸ɺQBDLBHFKTPOͷEFW%FQFOEFODJFTʹ   \

5ZQFTDSJQUରԠ "paths": { "~": ["./"], "~/": ["./", "./.native", "./.ios", "./*.android"],

TUZMFEDPNQPOFOUT TUZMFEDPNQPOFOUTΛ࠾༻ͨ͠ ϝϦοτ w TUZMFEDPNQPOFOUT͸8FCͱ/BUJWFͰผʑͷ5IFNF1SPWJEFSΛ౉ͤΔͷͰɺ   UIFNFͷUIFNFQSPQFSUZͷ݁߹Λߟ͑Δඞཁ͕ͳ͍ w 8FCଆͰ΋࠾༻͍ͯ͠Ε͹ɺίϯϙʔωϯτΛҠ২͠΍͍͢ σϝϦοτ

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

XFCQBDLͷઃఆ ར༻ଆ config.resolve.alias = { 'react-native$': require.resolve('react-native-web'), } w 8&#༻ʹBQQMJDBUJPOΛCVJME͢Δͱ͖͸ɺSFBDUOBUJWFύοέʔδͷJNQPSUΛ

XFCQBDLͷઃఆ ར༻ଆ w ࠓճ͸/FYUKTΞϓϦʹίϯϙʔωϯτΛҠ২͢Δํ๏Λࢼͨ͠ͷͰ   OFYUUSBOTQJMFNPEVMFTΛ༻͍ͯɺ෦[email protected]ͷதͰ΋USBOTQJMF   ର৅ʹؚΊΔύοέʔδΛઃఆͨ͠ XFCQBDL͸VTFTͷઃఆͰௐ੔ const

$SPTT1MBUGPSNؒͷελΠϧௐ੔ w DTTඪ४ͷ૬ର஋ࢦఆ SFN FN ͸8FCͰ͸ධՁ͞ΕΔ͕ɺϞόΠϧଆͰ͸   SFBDUOBUJWFϥΠϒϥϦ͚ͩͰ͸Ͱ͖ͳ͍ɻ   ʢIUUQTHJUIVCDPNWJUBMFUTSFBDUOBUJWFFYUFOEFETUZMFTIFFUͱ͍͏

$SPTT1MBUGPSNؒͷελΠϧௐ੔ SFN export type DeviceFontSizeType = | 'xxsmall' | 'xsmall'

$SPTT1MBUGPSNؒͷελΠϧௐ੔ ϝσΟΞΫΤϦ export const reactMediaQuery:ɹMediaQueryType = { xl: { maxWidth:

$SPTT1MBUGPSNؒͷελΠϧௐ੔ ϝσΟΞΫΤϦ export const WebAdjustText = styled(NativeText)` white-space: pre-line; line-height:

4UPSZCPPL w 3FBDU/BUJWF8FCͰ͸8FCϒϥ΢βͰදࣔͰ͖ΔͷͰɺTUPSZCPPL   ͷWJFXQPSUͰը໘αΠζΛ͔֬Ίͳ͕Β։ൃ͢Δͷ͕ศར w 3FBDU/BUJWFͷϙΠϯταΠζ͸04ґଘͷ6*Ͱ͸ͳ͍ݶΓઈରࢦఆʹͳΔͷͰɺ   7JFX1PSUͷݟͨ໨͸ը໘αΠζ͕ಉ͡Ͱ͋Ε͹ɺ8FCͰ΋ɺ.PCJMFͰ΋ಉ͡

4UPSZCPPL export const DarkThemeDecorator = ( story: () => React.ReactNode,

4UPSZCPPL

3FBDU/BUJWFͰ8FCରԠͯ͠ྑ͔ͬͨ఺ w 3FBDU/BUJWF8FCࣗମ͕ϨεϙϯγϒରԠ͠΍͍͔ͭ͢ߴػೳͳ6*ϥΠϒϥ ϦͳͷͰɺίϯϙʔωϯτࣗମͷ࣮૷ָ͕ʹͳΔ΋ͷ͕͋Δ .PEBM 4OBDLCBSͳͲ w $44Ͱॻ͚ΔͷͰҠ২͕εϜʔζʹ͍͘΋ͷ΋ଟ͍