React-native MyDimensions, useWindowDimensions 사용하기

junhyung kwon·2024년 2월 1일
0

React Native로 개발을 하던 중 세로모드일경우에는 ui상으로 깨지는 부분이 많이 없었는데 가로모드로 전환하니까 깨지는 현상이 발생하였다 .

그래서 MyDimensions 라는 기본적으로 제공되는 api를 사용하였고, 화면 크기 감지는 useWindowDimensions 라는 훅을 사용하여 화면 감지를 하였다.

const {height, width, scale, fontScale} = useWindowDimensions(); 이런식으로 변수화를 시켜준 후 편리하게 사용하였다.

스타일에 조건문을 가로모드일경우에는 height < width , 세로모드 일경우에는 반대로 height > width 이런식으로 조건을 걸어서 스타일을 적용해주면 편리하게 사용가능하다. ex) {height: height>width?height0.03:height0.06}

profile
“Everything comes to him who hustles while he waits” 항상 최고가 되기 위해 꾸준히 노력하며 성장해 나아가는 Front-End 개발자 권준형입니다.

0개의 댓글