반응형
SMALL
import {Dimensions} from 'react-native';
const dHeihgt = Dimensions.get('window').heihgt; //화면의 높이
const dWidth = Dimensions.get('window').width; //화면의 너비
const styles = StyleSheet.create({
sectionSubtitle: {
//화면 너비가 500보다 크면 22, 아니면 18
fontSize: dWidth > 500 ? 22 : 18,
...
},
...
})
비율대로 크기를 조정하려면 화면 너비를 24로 나눈 값을 사용하면 된다.
fontSize: Dimensions.get('window').width / 24;
이런식으로도 해봤는데 그러면 태블릿에서 글자가 너무 큰 것 같아서 그냥 저 정도로만 차이를 뒀다.
화면 크기를 이용해 style을 짜면 여러 디바이스에서 어플을 봐도 자연스럽게 보여서 좋다!
반응형
LIST
'개발 > React Native' 카테고리의 다른 글
[React Native] Text에서 특정 글자만 색상(스타일) 변경하기. (0) | 2023.07.06 |
---|---|
Android Emulator에서 FoldablePhone 해상도 테스트하기 (0) | 2023.07.04 |
[에러] Xcode14.3 빌드 오류 (0) | 2023.06.29 |
npm 환경변수 설정하기 (0) | 2023.06.28 |
[에러] Too many re-renders. React limits the number of renders to prevent an infinite loop. (0) | 2023.06.27 |