본문 바로가기
개발/React Native

React Native 화면 크기별로 폰트 사이즈 변경하기

by 세크레투스 2023. 7. 4.
반응형
SMALL
import {Dimensions} from 'react-native';

const dHeihgt = Dimensions.get('window').heihgt; //화면의 높이
const dWidth = Dimensions.get('window').width; //화면의 너비

const styles = StyleSheet.create({
	sectionSubtitle: {
    	//화면 너비가 500보다 크면 22, 아니면 18
    	fontSize: dWidth > 500 ? 22 : 18,
        ...
    },
    ...
})

 

비율대로 크기를 조정하려면 화면 너비를 24로 나눈 값을 사용하면 된다.

fontSize: Dimensions.get('window').width / 24;

이런식으로도 해봤는데 그러면 태블릿에서 글자가 너무 큰 것 같아서 그냥 저 정도로만 차이를 뒀다.

 

화면 크기를 이용해 style을 짜면 여러 디바이스에서 어플을 봐도 자연스럽게 보여서 좋다!

반응형
LIST