[RN] PixelRatio

디바이스의 치수 가져오기

import {Dimensions} from 'react-native';

const windowDimensions = Dimensions.get('window');

function component() {
  const [dimensions, setDimensions] = useState(windowDimensions);
  
  useEffect(() => {
    const subscription = Dimensions.addEventListener('change', ({window}) => {
      setDimensions(window);
    });
    return () => subscription?.remove();
  });

PixelRatio를 이용하여 반응형 크기 구하기

import {PixelRatio} from 'react-native';

export const convertToDP = (pixel: number): number => {
  return pixel / PixelRatio.get();
};
// PixelRatio.get() : 디바이스의 픽셀 밀도를 반환
// 입력된 픽셀값 / 픽셀 밀도 = dp (density-independent pixel)
// 리액트 네이티브는 px 이 아닌 dp로 나타낸다.

export const resizedFunc = (pixel: number, scale: number): number => {
  return convertToDP(pixel) * scale;
};
// 계산된 dp값에 기본 화면 비율을 곱해서 크기를 구함