[React-Native] 16. 앱 방향전환에 따른 스타일 조정

1. Dimensions를 이용한 스타일링

Dimensions라는 컴포넌트는 Device의 크기를 확인하는 컴포넌트이다.

const deviceWidth = Dimensions.get('windows').width로 사용하면 디바이스의 너비를 자동으로 감지한다.

이를 이용해서 style링을 하면

const deviceWidth = Dimensions.get('windows').width
const styles = StyleSheet.create({
container : {
	margintTop : deviceWidth < 300 ? 30 : 100
}
})

삼항연산자를 이용해 디바이스의 너비가 300보다 작으면 marginTop을 30 아니면 100으로 설정할 수 있다.

2. 다시 리로드 되지 않는 Dimensions

하지만 함수 밖에서 선언하기 때문에 Dimensions는 한 번만 로드 된다.

즉 사용자가 기기 너비가 실시간으로 변경하는 것을 감지 할 수 없다.

가로 모드에서 세로 모드로 넘어가면 너비가 변경이 되지만 알아차리지 못하고 처음에 실행이 되었을 때 그 값을 가지고 있다.

3. useWindowDimensions

useWindowDimensions 훅은 이를 감지할 수 있는 리액트 네이티브에서 제공하는 훅이다.

함수 안에서 실행되기 때문에 너비 혹은 높이가 변경되면 감지해서 다시 로드해준다.

const {width, height} = useWindowDimensions()

const myMarginTop = height < 300 ? 30 : 100
return (
	<View style= {[styles.container, {marginTop : myMarginTop}]}>
  
  	</View>
)

이렇게 작성하면 위치를 감지해서 marginTop을 확인할 수 있다.