[React Native] 모바일과 태블릿 스타일 구분하는 방법

 

고객사에서 여태까지 모바일에서만 앱을 사용하였다.

하지만, 이번 프로젝트기능은 태블릿으로 사용하신다고 한다.

 

태블릿에서 앱을 열어봔는데, ui 스타일이 몇몇군데가 깨진다.

쌈빡하게 해결해보자

 

---

 

1차 시도(실패) : Platform 사용

 

import { Platform } from 'react-native';

 

ios인지 android인지 구분할수 있는 Platform(react-native에서 제공)을 사용하면, 태블릿인지 아닌지 알 수 있을것 같앗다.

하지만 아래의 이미지를 보면, 안타깝게도 isPad라는 props를 ios에서만 반영해준다 ㅜㅜㅜ

갤럭시탭은 안된다는 말씀..... ㅜㅜㅜㅜ

 

▼ RN 공식문서 이미지

 

▼ RN 공식문서 링크: https://reactnative.dev/docs/platform

Platform · React Native

 

---

2차 시도(성공) : 조건문 함수 만들기 (화면크기로 구분하는 방법)

 

갤럭시에서 출시된 화면이 가장 큰 모바일과 가장 작은 태블릿의 규격을 비교하여 조건문을 만들었다.

 

요즘 나오는 모바일들은 화면이 커서, 가장작은 태블릿과 가장큰 모바일의 가로길이는 얼추 비슷하기 때문에 구분조건에 넣기는 불가..

대신 세로길이는 확실히 차이나기 때문에, 세로 길이로 구분하였다.

 

▼ 갤럭시에서 출시된 화면이 가장 큰 모바일과 가장 작은 태블릿의 규격 (출처: 삼성사이트)

 

---

 

아래의 코드에서 screenHeight의 길이를 각각 계산해보니, 태블릿은 얼추 1200을 넘긴다.

그래서 isTab 변수를 만들어서, 1200이 넘는지 조건문을 걸어놨다.

 

▼ isTab 변수 생성

import { Dimensions } from 'react-native';

const screenWidth = Dimensions.get('window').width;
const screenHeight = Dimensions.get('window').height;

const isTab = screenHeight > 1200;

 

---

 

위의 isTab 변수를 활용해서 태블릿과 모바일을 boolean값으로 구분하고,

그에 따라 style에 조건문으로 구분해준다.

 

▼ styles에 조건문 넣은 샘플

const styles = StyleSheet.create({
  title1: {
    borderWidth: 1,
    ...(isTab
      ? { fontSize: wp('3.5%') }
      : { fontSize: 18, fontWeight: 'bold' }),  // 조건에 따른 스타일 구분
  },
  title2: {
    ...(isTab && { padding: 20 }),              // 태블릿일때만 스타일 props 적용
  },
});

 

---

 

3차 시도(성공) : react-native-device-info 라이브러리 사용 (기기종류로 구분하는 방법)

 

device 정보를 받아오는 라이브러리인 'react-native-device-info' 를 설치하여,

isTablet() 이라는 함수로 boolean 값을 받아와서 구분한다.

 

▼ react-native-device-info 라이브러리 샘플코드

import DeviceInfo from 'react-native-device-info';

const isTab = DeviceInfo.isTablet();	// 태블릿이면 true 아니면 false 출력

 

▼ react-native-device-info 라이브러리 링크: https://www.npmjs.com/package/react-native-device-info/v/8.4.9

react-native-device-info

 

▼ react-native-device-info 라이브러리의 isTablet() 사용가능한 플랫폼 

Method	Return Type	iOS	Android	Windows	Web
isTablet()	boolean	✅	✅	✅	❌

 

---

개인적으로 개발시행착오를 겪으면서, 그런 경험들을 기록하기도하고, 모은정보들을 메모하며, 개인공부내용을 공유하는 게시물입니다. 친절한 조언과 다양한 의견 남겨주시고, 소통해주시는분들은 언제든지 환영합니다 :D