Skip to main content

PlatformColor

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

你可以使用 PlatformColor 函数通过提供原生颜色的相应字符串值来访问目标平台上的原生颜色。你将一个字符串传递给 PlatformColor 函数,只要该字符串存在于该平台上,它将返回相应的原生颜色,你可以将其应用到应用的任何部分。

¥You can use the PlatformColor function to access native colors on the target platform by supplying the native color’s corresponding string value. You pass a string to the PlatformColor function and, provided it exists on that platform, it will return the corresponding native color, which you can apply in any part of your application.

如果将多个字符串值传递给 PlatformColor 函数,它会将第一个值视为默认值,其余值视为后备值。

¥If you pass more than one string value to the PlatformColor function, it will treat the first value as the default and the rest as fallback.

PlatformColor('bogusName', 'linkColor');

由于原生颜色可能对主题和/或高对比度敏感,因此该平台特定逻辑也会在你的组件内部进行转换。

¥Since native colors can be sensitive to themes and/or high contrast, this platform specific logic also translates inside your components.

支持的颜色

¥Supported colors

有关支持的系统颜色类型的完整列表,请参阅:

¥For a full list of the types of system colors supported, see:

开发者注意事项

¥Developer notes

如果你熟悉设计系统,另一种思考方式是,PlatformColor 可让你利用本地设计系统的颜色标记,以便你的应用可以直接融入其中!

¥If you’re familiar with design systems, another way of thinking about this is that PlatformColor lets you tap into the local design system's color tokens so your app can blend right in!

示例

¥Example

提供给 PlatformColor 函数的字符串值必须与应用运行的原生平台上存在的字符串匹配。为了避免运行时错误,该函数应该通过 Platform.OS === 'platform'Platform.select() 封装在平台检查中,如上面的示例所示。

¥The string value provided to the PlatformColor function must match the string as it exists on the native platform where the app is running. In order to avoid runtime errors, the function should be wrapped in a platform check, either through a Platform.OS === 'platform' or a Platform.select(), as shown on the example above.

注意:你可以找到一个完整的示例,演示如何在 PlatformColorExample.js 中正确、预期地使用 PlatformColor

¥Note: You can find a complete example that demonstrates proper, intended use of PlatformColor in PlatformColorExample.js.