react-native-tool
디자인과 개발 디바이스별 사이즈 대응
RNDK
2023. 6. 28. 11:22
import {Dimensions} from 'react-native';
// 디자인 시안의 기본 디바이스 크기
export const basicDimensions = {
height: 740, // 세로 크기
width: 360, // 가로 크기
};
// 현재 화면 크기 계산 함수
const calculateDimension = () => {
const {height, width} = Dimensions.get('window');
return {
height, // 현재 세로 크기
width, // 현재 가로 크기
};
};
// 세로 및 가로 방향 비율에 따른 크기 변환 함수 생성
export const getDimension = () => {
const {height, width} = calculateDimension();
return {
// 세로 방향 비율에 따른 크기 변환 함수
hp: (num: number) => {
return num * Number((height * (1 / basicDimensions.height)).toFixed(2));
},
// 가로 방향 비율에 따른 크기 변환 함수
wp: (num: number) => {
return num * Number((width * (1 / basicDimensions.width)).toFixed(2));
},
};
};
// 초기 세로 및 가로 방향 비율에 따른 크기 변환 함수 생성
let {hp, wp} = getDimension();
// 디바이스의 화면 크기가 변경될 때마다 실행되는 콜백 함수 등록
Dimensions.addEventListener('change', () => {
// 세로 및 가로 방향 비율에 따른 크기 변환 함수를 다시 생성하여 업데이트
console.log('change');
({hp, wp} = getDimension());
});
// 세로 및 가로 방향 비율에 따른 크기 변환 함수를 외부에서 참조할 수 있도록 export
export {hp, wp};