플랫폼

예제

참조

속성

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 (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 />;