React Native - 반응형 디자인 (deprecated)

김동현·2021년 2월 22일

reactnative 반응형

ReactNative

목록 보기

1/2

현재 이 글은 depreacated 상태 입니다.
좀더 정밀하게 다듬은 글을 2021-12월 내로 업로드할 예정입니다.

디자이너와의 협업을 면접에서 물어보기도 한다.
따라서 zeplin을 적절히 어떻게 사용할 것인지도 중요하다.
이러한 부분까지 종합적으로 기술하도록 하겠다.

`width` `height`

기본 사용법

숫자 ⇒ 고정크기
% ⇒ 화면 크기에 따른 상대적 크기 , 기준은 DOM Tree 바로 위 Parent DOM

문제점

zeplin 을 이용하여 협업을 할때, 일일히 %를 계산하는 짓은 귀찮고 실수가 날 가능성도 있다.
- 이를 모듈화를 한다고 해도, 정확하지 않을때가 있다.
폴더블 폰이나 가로모드에도 대응하기 어렵다. (반응형 디자인이 어렵다는 이야기)
또한 일부의 Component들은 (FlatList 안에서의 Item 등) percentage 가 먹히질 않는다!

`Dimenstion`

Dimensions · React Native

Dimenstion 을 이용하면, 현재 기기의 픽셀 수를 직접 가져와서 대응하기때문에 위에서 언급한 내용들을 해결 할 수 있음
```
width: Dimensions.get('window').width / 4
```
이때, useWindowDimenstion을 이용하는 것이 window의 dimenstion이 업데이트 될때 대응하기가 좋음 (React의 패러다임과 자연스럽게 어울림)
최종적으로는 useWindowDimenstion을 이용하는 React Native Responsive Dimensions 를 이용하는 편이 제일 좋음.

React Native Responsive Dimenstion

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

최종적으로 사용하는 라이브러리
responsiveHeight responsiveWidth responsiveFontSize 를 사용하면 된다
- 만약 android 환경에서 안드로이드 자체의 Naviagtion Bar 까지 포함해서 디자인을 계산하고 싶다면 responsiveScreenHeight responsiveScreenWidth responsiveScreenFontSize 를 이용하면 된다.
width와 height 가 적용되는 StyleSheet value들은 다음과 같다.
⇒ padding margin
fontSize가 적용되는 StyleSheet value들은 다음과 같다
⇒ fontSize lineHeight
필자가 이 라이브러리를 사용하는 방식은 다음과 같다

새로운 파일을 하나 만든다. (Responsive.ts 정도로 파일명을 정함)
다음과 같이 디자이너가 작업하고 있는 zeplin의 width 값과 height값을 넣어준다

        const ZEPLIN__WINDOW__WIDTH = 375;
        const ZEPLIN__WINDOW__HEIGHT = 812;

zeplin에 적혀져 있는 값을 그대로 넣어도 되도록 다음과 같이 함수를 짜준다.
이때, font와 관련된 값은 ios와 android의 차이점도 있으므로, 적당한 상수를 조절해가면서 알아내야한다. 위의 값들의 경우 필자는 0.125정도가 적당한 상수값임을 알아냈다.

        export const widthPercentage = (width: number) => {
        	const percentage = (width / ZEPLIN__WINDOW__WIDTH) * 100;

        	return responsiveWidth(percentage);
        };
        export const heightPercentage = (height: number) => {
        	const percentage = (height / ZEPLIN__WINDOW__HEIGHT) * 100;

        	return responsiveHeight(percentage);
        };
        export const fontPercentage = (size : number) => {
        	const percentage = size * 0.125;

        	return responsiveFontSize(percentage);
        };