PlatformColor

js

PlatformColor(color1, [color2, ...colorN]);

PlatformColor 함수를 사용하면 타겟 플랫폼의 네이티브 색상에 접근할 수 있다. 네이티브 색상에 해당하는 문자열 값을 제공하면 된다. PlatformColor 함수에 문자열을 전달하면, 해당 플랫폼에 존재하는 경우 해당하는 네이티브 색상을 반환한다. 이 색상을 애플리케이션의 어느 부분에나 적용할 수 있다.

PlatformColor 함수에 여러 문자열 값을 전달하면, 첫 번째 값을 기본값으로 처리하고 나머지를 대체값으로 사용한다.

js

PlatformColor('bogusName', 'linkColor');

네이티브 색상은 테마나 고대비 설정에 따라 달라질 수 있기 때문에, 이 플랫폼별 로직은 컴포넌트 내부에서도 적용된다.

지원되는 색상

시스템에서 지원하는 색상 타입의 전체 목록은 다음 링크에서 확인할 수 있다:

• 안드로이드:
  • R.attr - ?attr 접두사 사용
  • R.color - @android:color 접두사 사용
• iOS (Objective-C 및 Swift 표기법):
  • UIColor Standard Colors
  • UIColor UI Element Colors

개발자 노트

Web

디자인 시스템에 익숙하다면, PlatformColor를 통해 로컬 디자인 시스템의 색상 토큰을 활용할 수 있어 앱이 자연스럽게 어울리도록 만들 수 있다!

예제

PlatformColor 함수에 전달하는 문자열 값은 앱이 실행 중인 네이티브 플랫폼에 존재하는 문자열과 정확히 일치해야 한다. 런타임 오류를 방지하려면, 위 예제에서 보여준 것처럼 Platform.OS === 'platform'이나 Platform.select()를 사용해 플랫폼을 확인하는 로직으로 감싸야 한다.

참고: PlatformColor의 올바른 사용법을 보여주는 완전한 예제는 PlatformColorExample.js에서 확인할 수 있다.