[React Native] 10. 반응형 디자인 적용하기

1. 반응형 디자인의 필요성

앱의 특성상, 앱을 사용하는 기기의 디스플레이 크기가 천차만별이니 component 등의 사이즈를 해당 크기에 맞게 정해줄 필요가 있다.

 

본인은 디자이너와의 협업을 위해 figma를 사용하는데,

figma의 inspect 탭에서 다음과 같이 pixel 사이즈로 알려준다. (고정크기라 디스플레이화면 고려 X)

figma > Inspect

 

또, 퍼센트 단위는 styled-component에서 사용 불가하다.

 

 

 

2. React Native의 Dimensions

import { Dimensions } from "react-native";

const WINDOW_WIDHT = Dimensions.get("window").width; // Dimensions.get("screen").width;
const WINDOW_HEIGHT = Dimensions.get("window").height;

Dimensions를 사용하면 현재 디스플레이의 크기를 얻어올 수 있다.

get() 함수 안 속성값으로, "window"와 "screen"이 있다.

• window: 보이는 어플리케이션 창의 크기
• screen: 기기 전체 화면의 크기

iOS는 둘 다 같은 값을 반환.
Android는 상태표시줄을 제외한 크기->window 라고 한다.

 

또한, 공식 문서에선 "가로모드 전환이나 폴더블 기기처럼 크기에 변경이 있을 수 있으니 모든 render에서 이 함수를 호출해야한다"고 한다.

 

예시 )

 (출처: https://reactnative.dev/docs/dimensions)

const App = () => {
  const [dimensions, setDimensions] = useState({ window, screen });

  useEffect(() => {
    const subscription = Dimensions.addEventListener(
      "change",
      ({ window, screen }) => {
        setDimensions({ window, screen });
      }
    );
    return () => subscription?.remove();
  });
 ...

 

 

 

3. useWindowDimensions

import { useWindowDimensions } from 'react-native';

const { height, width } = useWindowDimensions();

이 함수는 width와 height를 자동으로 업데이트해준다. (공식 문서)

 

 

 

4. React Native Responsize Dimensions

위의 useWindowDimensions 문서에서 Responsive hooks도 지원해주는 라이브러리라고 소개해주고 있다.

• react-native-toolkit/react-native-responsive-dimensions

 

1) 설치

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

#yarn
yarn add react-native-responsive-dimensions

 

2) 사용

• Window Dimensions: responsizeHeight, responsiveWidth, responsiveFontSize 함수
• Screen Dimensions: responsizeScreenHeight, responsiveScreenWidth, responsiveScreenFontSize 함수

 

위 함수를 사용해서, figma에 정의된 pixel 크기에 따른 크기를 계산해주는 코드를 작성했다.

 

- ResponsiveSize.tsx 파일을 하나 생성 후,

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

const FIGMA_WINDOW_WIDTH = 360;
const FIGMA_WINDOW_HEIGHT = 760;

export function widthPercentage(width: number): number {
  const percentage = (width / FIGMA_WINDOW_WIDTH) * 100;

  return responsiveScreenWidth(percentage);
}

export function heightPercentage(height: number): number {
  const percentage = (height / FIGMA_WINDOW_HEIGHT) * 100;

  return responsiveScreenHeight(percentage);
}

export function fontPercentage(size: number): number {
  const percentage = size * 0.135;

  return responsiveScreenFontSize(percentage);
}

위와 같이 작성해줬다.

 

Figma의 화면크기가 width=360, height=760으로 설정돼있어

const FIGMA_WINDOW_WIDTH = 360;
const FIGMA_WINDOW_HEIGHT = 760;

이렇게 상수를 정의해준 후 사용했다.

 

폰트 크기에 곱해주는 값은 적당한 값을 찾아서 적용해줘야 한다.

 

styled-component에서 사용하는 방법은 다음과 같다.

const SomeView = Styled.View`
    position: relative;
    flex: 1 1 auto;
    width: ${widthPercentage(360)}px;
    height: ${heightPercentage(688)}px;
    background: #FFFFFF;
`;