跳到主要内容

DynamicColorIOS

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

tsx
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 上“浅色模式”和“深色模式”下想要使用的颜色，以及在启用高对比度辅助功能模式时，这些颜色的高对比度版本。

在运行时，系统会根据当前的系统外观和辅助功能设置来选择显示哪种颜色。动态颜色对于品牌颜色或其他应用程序特定的颜色很有用，它们仍然能自动响应系统设置的更改。

开发者注意事项​

信息

如果你熟悉 CSS 中的 @media (prefers-color-scheme: dark)，这与它类似！只不过，你不需要在媒体查询中定义所有颜色，而是在使用它们的地方直接定义在何种情况下使用哪种颜色。很棒！

示例​

tsx
import {DynamicColorIOS} from 'react-native';

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

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