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 上用于“浅色模式”和“深色模式”的颜色,以及启用高对比度辅助模式时对应的高对比度版本颜色。
在运行时,系统会根据当前的系统外观和辅助功能设置来选择要显示的颜色。动态颜色对于品牌颜色或其他应用特定颜色很有用,它们仍然可以自动响应系统设置的变化。
开发者注意事项
- iOS
- Web
如果你熟悉 CSS 中的 `@media (prefers-color-scheme: dark)`,这个功能与它类似!不同之处在于,你不是在媒体查询中定义所有颜色,而是在使用颜色的地方直接定义在何种情况下使用哪种颜色。很棒!
DynamicColorIOS
函数类似于 iOS 原生方法 `UIColor colorWithDynamicProvider:`
示例
tsx
import {DynamicColorIOS} from 'react-native';
const customDynamicTextColor = DynamicColorIOS({
dark: 'lightskyblue',
light: 'midnightblue',
});
const customContrastDynamicTextColor = DynamicColorIOS({
dark: 'darkgray',
light: 'lightgray',
highContrastDark: 'black',
highContrastLight: 'white',
});