[React Native] 휴대폰/시뮬레이터 화면의 총 가로/세로 길이를 알아내는 법! => Dimensions

Dimensions를 이용하면 화면의 총 가로 세로 길이를 알 수 있다.

 

constants.js

import {Dimensions} from 'react-native';

const {width, height} = Dimensions.get('screen');

export default {width, height};

파일을 하나 만들어서 여러 컴포넌트에서 활용하자!

 

 

 

앱의 화면을 만들 때 View 의 세로 길이를 휴대폰 기종마다 같은 비율을 적용하고 싶다면

import React from 'react';
import constants from './constants';

const Container = () => (
  <View style={{ width: constants.width / 2, height: constants.height / 3 }} />
);

이런식으로 활용 가능!