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

우선 여기저기 요긴하게 쓰이는 화면 크기 알아내는 법 

 

import { Dimensions } from 'react-native';

//화면의 높이
Dimensions.get('window').height

//화면의 너비
Dimensions.get('window').width

 

화면 크기에 따른 폰트 사이즈 변경하기 

 

  const styles = StyleSheet.create({
 	...
    sectionSubtitle: {
      // 화면 너비가 500보다 크면 22, 아니면 18 
      fontSize: Dimensions.get('window').width > 500? 22 : 18,
    textAlign: 'center',
    fontFamily: 'Bazzi',
    },
    ...

 

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

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

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

 

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