[React Native]Dimensions API

Dimensions ???

JSX코드에서 사용하는 컴포넌트는 아니고 JavaScript 객체라서 styles를 포함한 JavaScript 코드 어디에서나 정보 추출을 위해 사용할 수 있다.

사용법은 react-native 로 부터 Dimensions 을 불러온다.

---

무슨 정보를 추출할 수 있을까?🤔
기기의 너비와 높이를 추출할 수 있다.

(⚠️ 주의 : 기기 화면 방향에 관한 정보를 얻을 수 없으며 기기 화면의 너비와 높이에 관한 정보만 제공)

import { Dimensions } from "react-native";

//get 메서드가 문자열 타입 인수로서 화면이나 윈도우의 치수를 지닌다. 
const deviceWidth = Dimensions.get('')

( ⚠️주의 : ios 에서는 두 개념이 다르지 않은데 안드로이드의 경우 화면은 상태 표시줄을 포함한 너비와 높이고 윈도우는 상태 표시줄을 제외한 너비와 높이라서 UI가 실제로 표시되는 화면이다. )

fontScale 을 사용하여 사용자가 원하는 앱의 스케일을 파악하고 해당 스케일에 글꼴 크기를 곱하면 된다.

ex.

import { View, Text, StyleSheet, Dimensions } from "react-native";
.
.

생략
.
.
//get 메서드가 문자열 타입 인수로서 화면이나 윈도우의 치수를 지닌다. 
const deviceWidth = Dimensions.get('window').width;

const styles = StyleSheet.create({
  container: {
    borderWidth: 4,
    borderColor: Colors.primary300, 
    //deviceWidth가 450px 보다 크면 24를 설정 즉, 작은 화면의 안쪽 여백은 12픽셀이고 큰 화면에는 24픽셀이라는 뜻
    padding: deviceWidth < 380 ? 12 : 24,
    margin: deviceWidth < 380 ? 12 : 24,
    borderRadius: 8,
    alignItems: "center",
    justifyContent: "center",
  },
  numberText: {
    color: Colors.primary300,
    fontSize: deviceWidth < 380 ? 28 : 36,
  },
	imageContainer: {
		//380픽셀보다 작다면 이미지의 폭을 150픽셀로 설정하고 큰 화면일 경우 300픽셀로 설정
		width: deviceWidth < 380 ? 150 : 300,
		height:  deviceWidth < 380 ? 150 : 300,
		borderRadius:  deviceWidth < 380 ? 75 : 150,
	},
	image: {
		width:~
		height:~
	},
});