跳到主要内容
版本:0.80

DynamicColorIOS

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

tsx
DynamicColorIOS({
light: color,
dark: color,
highContrastLight: color, // (可选) 如果未提供将回退到 "light"
highContrastDark: color, // (可选) 如果未提供将回退到 "dark"
});

DynamicColorIOS 接受单个参数,该参数是一个对象,包含两个必填键:darklight,以及两个可选键 highContrastLighthighContrastDark。这些对应于你在 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',
});