Skip to main content

DynamicColorIOS

DynamicColorIOS 函数是 iOS 特有的平台颜色类型。

¥The DynamicColorIOS function is a platform color type specific to iOS.

DynamicColorIOS({
  light: color,
  dark: color,
  highContrastLight: color, // (optional) will fallback to "light" if not provided
  highContrastDark: color, // (optional) will fallback to "dark" if not provided
});

DynamicColorIOS 将单个参数作为具有两个强制键的对象：dark 和 light，以及两个可选键 highContrastLight 和 highContrastDark。这些对应于你想要在 iOS 上用于 "灯光模式" 和 "夜间模式" 的颜色，并且当启用高对比度辅助功能模式时，它们的高对比度版本。

¥DynamicColorIOS takes a single argument as an object with two mandatory keys: dark and light, and two optional keys highContrastLight and highContrastDark. These correspond to the colors you want to use for "light mode" and "dark mode" on iOS, and when high contrast accessibility mode is enabled, high contrast version of them.

在运行时，系统将根据当前系统外观和辅助功能设置选择要显示的颜色。动态颜色对于品牌颜色或其他仍自动响应系统设置更改的应用特定颜色非常有用。

¥At runtime, the system will choose which of the colors to display depending on the current system appearance and accessibility settings. Dynamic colors are useful for branding colors or other app specific colors that still respond automatically to system setting changes.

开发者注意事项​

¥Developer notes

如果你熟悉 CSS 中的 @media (prefers-color-scheme: dark)，这很相似！只是你无需定义媒体查询中的所有颜色，而是定义在使用颜色的情况下使用哪种颜色。整洁的！

¥If you’re familiar with @media (prefers-color-scheme: dark) in CSS, this is similar! Only instead of defining all the colors in a media query, you define which color to use under what circumstances right there where you're using it. Neat!

示例​

¥Example

import {DynamicColorIOS} from 'react-native';

const customDynamicTextColor = DynamicColorIOS({
  dark: 'lightskyblue',
  light: 'midnightblue',
});

const customContrastDynamicTextColor = DynamicColorIOS({
  dark: 'darkgray',
  light: 'lightgray',
  highContrastDark: 'black',
  highContrastLight: 'white',
});