跳至主内容

DynamicColorIOS

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

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 的"浅色模式"和"深色模式"下使用的颜色，以及启用高对比度辅助功能时的高对比度版本颜色。

在运行时，系统会根据当前的外观模式和辅助功能设置自动选择合适的颜色。动态颜色特别适用于品牌色或其他需要自动响应系统设置变化的应用程序特定颜色。

开发者说明​

信息

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!

示例​

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

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

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