RN 반응형 디자인 적용법

1. React Native의 Dimensions

 

import {Dimensions} from 'react-native';

const basicDimensions = {
  width: 360,
  height: 800,
};

const width: any = (
  Dimensions.get('screen').width *
  (1 / basicDimensions.width)
).toFixed(2);

const height: any = (
  Dimensions.get('screen').height *
  (1 / basicDimensions.height)
).toFixed(2);

const fontSizes = {
  fontSizes16: width * 16,
  fontSizes14: width * 14,
  fontSizes12: width * 12,
  fontSizes22: width * 22,
  fontSizes18: width * 18,
};

// theme 객체에 감싸서 반환한다.
const Theme = {
  fontSizes,
  height,
  width,
};

export default Theme;

 

styled-component 적용

const InputField = styled.TextInput<InputProps>`
  padding: ${Theme.height * 12}px ${Theme.width * 16}px;
  font-size: ${Theme.fontSizes.fontSizes16}px;
`;

 

2. React Native Responsize Dimensions

https://github.com/react-native-toolkit/react-native-responsive-dimensions

GitHub - react-native-toolkit/react-native-responsive-dimensions: Resposive fontSize, height and width for react-native componen

#npm
npm install --save react-native-responsive-dimensions

#yarn
yarn add react-native-responsive-dimensions

import {
  responsiveScreenHeight,
  responsiveScreenWidth,
  responsiveScreenFontSize,
} from 'react-native-responsive-dimensions';

const basicDimensions = {
  width: 360,
  height: 800,
};

const width = (basicwidth: number): number => {
  const percentage = (basicwidth / basicDimensions.width) * 100;

  return responsiveScreenWidth(percentage);
};

const height = (basicheight: number): number => {
  const percentage = (basicheight / basicDimensions.height) * 100;

  return responsiveScreenHeight(percentage);
};

const fontSize = (basicsize: number): number => {
  const percentage = basicsize * 0.135;

  return responsiveScreenHeight(percentage);
};

// theme 객체에 감싸서 반환한다.
const Theme = {
  fontSize,
  height,
  width,
};

export default Theme;

styled-component 적용

const InputField = styled.TextInput<InputProps>`
  padding: ${Theme.height(12)}px ${Theme.width(16)}px;
  width: 100%;
  font-size: ${Theme.fontSize(16)}px;
`;