[React Native]가로크기조정

app.json 에서 기본으로 세로방향으로 고정되어 있는데 이부분을 수정해줘야했다.

"orientation" : "portrait"

->

"orientation" : "defalut"

방향을 수정하면 앱이 깨지는 현상이 발생한다. 이럴경우 수정해줘야할 부분이 많다.

사용중 방향 전환이 필요할 경우…기기의 방향 변경에 맞게 화면의 방향이 조정되는 반응형 코드를 작성하는 것이 좋은데..

import { useWindowDimensions } from "react-native";

function Start()  {
	//이 훅을 호출하기만 하면 객체를 반환할 수 있고 객체 구조 분해를 통해 기기의 너비와 높이를 얻을 수 있다.
	//예를 들면 기기가 회전할 경우의 변경 사항이 발생할 때마다 이 컴포넌트 함수가 재실행되고 폭과 길이가 업데이트 된다.
	//컴포넌트 내의 상단 여백의 값을 동적으로 구할 수 있고 이 동적 높이 또는 너비를 JSX코드에서 사용할 수 있는 것

	const { width, height } = useWindowDimensions();
	//이미지크기 조정
	
	let imageSize = 300;

	if(width < 380) {
		imageSize = 150;
	}
	
	if(height < 400) {
		imagesSize = 80;
	}

	const imageStyle = {
		width: imageSize,
		height: imageSize,
		borderRadius: imageSize /2 ,
	}
	const marginTopDistance = height < 380 ? 30 : 100;

	return (
		...생략
		<View style={[styles.rootCantainer, {marginTop: marginTopDistance}]>
	)

}