Search
Duplicate

React Native - 기기 설정에 따른 UI 확대 문제

Created time
2024/04/03 08:43
Last edited time
2024/06/15 14:13
Status
Done
tag

들어가기에 앞서

참고한 자료를 바탕으로 비전문가가 정리한 글이므로 오류가 있을 수 있습니다.
오류에 대한 피드백은 언제든지 환영합니다. 부디 댓글로 알려주시길 바랍니다. 감사합니다.

텍스트 크기 설정에 따른 UI 크기 조절 문제

시뮬레이터 상에서 작업한 모습
실제 아이폰 상에서 보이는 모습
React Native로 UI를 개발하던 중 Xcode Simulator 상에서 보이던 화면과 제 아이폰에서 보이는 화면이 다른 것을 발견했습니다. 해당 문제는 기기 내의 텍스트 크기 설정이 앱에도 적용되는 현상이라고 합니다.
아이폰 설정 중 텍스트 크기를 최대로 한 모습

해결 방법

해결 방법은 매우 간단합니다. 프로젝트의 루트 폴더에 위치한 App.tsx에 위와 같이 Text 컴포넌트의 defaultProps.allowFontScaling 속성을 false로 지정하면 됩니다.
(Text as any).defaultProps = (Text as any).defaultProps || {}; (Text as any).defaultProps.allowFontScaling = false;
TypeScript
복사

참고