PlatformColor

js

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

PlatformColor関数を使用すると、対象プラットフォームのネイティブカラーに対応する文字列値を指定することで、ネイティブカラーにアクセスできます。PlatformColor関数に文字列を渡すと、そのプラットフォームに存在する場合、対応するネイティブカラーが返され、アプリケーションの任意の場所で適用できます。

PlatformColor関数に複数の文字列値を渡した場合、最初の値はデフォルトとして扱われ、残りはフォールバックとして扱われます。

js

PlatformColor('bogusName', 'linkColor');

ネイティブカラーはテーマやハイコントラストに影響されやすいため、このプラットフォーム固有のロジックはコンポーネント内にも適用されます。

サポートされている色

サポートされているシステムカラーの種類の完全なリストについては、以下を参照してください。

• Android
  • R.attr - ?attr 接頭辞
  • R.color - @android:color 接頭辞
• iOS (Objective-C および Swift 表記)
  • UIColor 標準色
  • UIColor UIエレメント色

開発者向けメモ

Web

情報

デザインシステムに詳しい方であれば、別の考え方として、PlatformColorを使用すると、ローカルのデザインシステムのカラー・トークンを活用できるため、アプリをより自然に馴染ませることができる、と言えるでしょう。

例

PlatformColor関数に提供される文字列値は、アプリが実行されているネイティブプラットフォームに存在する文字列と一致する必要があります。ランタイムエラーを避けるため、上記の例に示すように、この関数はPlatform.OS === 'platform'またはPlatform.select()によるプラットフォームチェックでラップする必要があります。

注

PlatformColorの適切かつ意図された使用法を示す完全な例は、PlatformColorExample.jsで確認できます。