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

디자인 시스템에 익숙하다면, PlatformColor를 로컬 디자인 시스템의 색상 토큰과 연결해 앱이 자연스럽게 어우러지도록 하는 방법으로 생각할 수 있다!

예제

PlatformColor 함수에 제공된 문자열 값은 앱이 실행되는 네이티브 플랫폼에 존재하는 문자열과 정확히 일치해야 한다. 런타임 오류를 방지하기 위해 이 함수는 Platform.OS === 'platform' 또는 Platform.select()와 같은 플랫폼 체크로 감싸야 한다. 위 예제에서 보여준 것처럼 말이다.

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