[React Native] Dimensions, Device 정보

1. Dimensions

Dimensions의 경우 화면의 크기 정보를 받아오는데 유용하다. Dimensions는 주로 fontScale에 따른 예외처리를 할 때 사용된다. 극히 드물지만 사용자가 단말기 설정에서 디바이스 전체 폰트 스케일을 변경하는 경우, 개발한 앱이 이상해질 수 있기 때문이다.

import { View, Text, StyleSheet, Platform, Dimensions } from 'react-native';

...

  functionA = () => {
    if(Dimensions.get('window').fontScale === 1) {
      console.warn('Good')
    } else {
      console.warn('Error, The font scale must be 1')
    }
  }

  render() {
    console.warn(Dimensions.get('screen')) // 전체 화면
    console.warn(Dimensions.get('window')) // 소프트웨어 메뉴 바를 제외한 화면 크기
    
    <View>
      { this.functionA }
    </View>

...

 

 

 

2. Device 정보

Device의 정보를 가져오기 위해서는 깃 허브(github.com/react-native-device-info/react-native-device-info)의 메뉴얼대로 설치하고 적용하면 확인할 수 있다. 

npm install --save react-native-device-info

cd ios
pod install
cd ..

사용방법은 깃 허브의 API의 표에 따라 사용하면 된다.

import { getUniqueId, getManufacturer } from 'react-native-device-info';

...

    console.warn(DeviceInfo.getBrand())
    console.warn(DeviceInfo.isTablet())

...