플랫폼

예제

참조

속성

constants

tsx

static constants: PlatformConstants;

플랫폼과 관련된 모든 공통 및 특정 상수를 포함하는 객체를 반환한다.

속성:

이름	타입	선택적	설명
isTesting	boolean	아니오
reactNativeVersion	object	아니오	React Native 버전 정보. 키는 major, minor, patch이며, 선택적으로 prerelease가 포함될 수 있다. 값은 number 타입이다.
Version Android	number	아니오	Android 전용 OS 버전 상수.
Release Android	string	아니오
Serial Android	string	아니오	Android 기기의 하드웨어 시리얼 번호.
Fingerprint Android	string	아니오	빌드를 고유하게 식별하는 문자열.
Model Android	string	아니오	Android 기기의 사용자에게 보이는 이름.
Brand Android	string	아니오	제품/하드웨어와 연결된 소비자에게 보이는 브랜드.
Manufacturer Android	string	아니오	Android 기기의 제조사.
ServerHost Android	string	예
uiMode Android	string	아니오	가능한 값: 'car', 'desk', 'normal','tv', 'watch', 'unknown'. Android ModeType에 대해 더 알아보기.
forceTouchAvailable iOS	boolean	아니오	기기에서 3D Touch의 사용 가능 여부를 나타낸다.
interfaceIdiom iOS	string	아니오	기기의 인터페이스 타입. UIUserInterfaceIdiom에 대해 더 알아보기.
osVersion iOS	string	아니오	iOS 전용 OS 버전 상수.
systemName iOS	string	아니오	iOS 전용 OS 이름 상수.

---

isPad

iOS

tsx

static isPad: boolean;

기기가 iPad인지 여부를 정의하는 불리언 값을 반환한다.

타입
boolean

---

isTV

tsx

static isTV: boolean;

디바이스가 TV인지 여부를 정의하는 불리언 값을 반환한다.

타입
boolean

isVision

tsx

static isVision: boolean;

디바이스가 Apple Vision인지 여부를 나타내는 불리언 값을 반환한다. Apple Vision Pro (Designed for iPad)를 사용 중이라면 isVision은 false가 되고, isPad는 true가 된다.

타입
boolean

isTesting

tsx

static isTesting: boolean;

애플리케이션이 테스트 플래그가 설정된 개발자 모드에서 실행 중인지 여부를 정의하는 불리언 값을 반환한다.

타입
boolean

---

OS

tsx

static OS: 'android' | 'ios';

현재 운영체제를 나타내는 문자열 값을 반환한다.

타입
enum('android', 'ios')

Version

tsx

static Version: 'number' | 'string';

운영체제의 버전을 반환한다.

타입
number Android string iOS

메서드

select()

tsx

static select(config: Record<string, T>): T;

현재 실행 중인 플랫폼에 가장 적합한 값을 반환한다.

파라미터:

이름	타입	필수 여부	설명
config	object	예	아래 config 설명을 참고하세요.

select 메서드는 현재 실행 중인 플랫폼에 가장 적합한 값을 반환한다. 예를 들어 휴대폰에서 실행 중이라면 android와 ios 키가 우선순위를 가진다. 이 키들이 지정되지 않은 경우 native 키를 사용하고, 마지막으로 default 키를 사용한다.

config 파라미터는 다음과 같은 키를 가진 객체다:

• android (any)
• ios (any)
• native (any)
• default (any)

사용 예시:

tsx

import {Platform, StyleSheet} from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    ...Platform.select({
      android: {
        backgroundColor: 'green',
      },
      ios: {
        backgroundColor: 'red',
      },
      default: {
        // 웹과 같은 다른 플랫폼
        backgroundColor: 'blue',
      },
    }),
  },
});

이 코드는 모든 플랫폼에서 flex: 1을 적용하고, 안드로이드에서는 배경색을 녹색, iOS에서는 빨간색, 다른 플랫폼에서는 파란색으로 설정한다.

해당 플랫폼 키의 값은 any 타입이므로, select 메서드는 플랫폼별 컴포넌트를 반환하는 데에도 사용할 수 있다. 아래 예시를 참고하자:

tsx

const Component = Platform.select({
  ios: () => require('ComponentIOS'),
  android: () => require('ComponentAndroid'),
})();

<Component />;

tsx

const Component = Platform.select({
  native: () => require('ComponentForNative'),
  default: () => require('ComponentForWeb'),
})();

<Component />;