第34章 React Native iOS DynamicColor 动态颜色实现详解
版本:0.77
DynamicColorIOS
DynamicColorIOS 是专为 iOS 平台设计的颜色类型。
React TSX DynamicColorIOS({ light: color, dark: color, highContrastLight: color, // (可选)如果未提供,将回退到 "light" highContrastDark: color, // (可选)如果未提供,将回退到 "dark" });
DynamicColorIOS 接受一个对象作为参数,其中包含两个必选键 dark 和 light,以及两个可选键 highContrastLight 和 highContrastDark。这些键分别对应 iOS 上“浅色模式”和“深色模式”所需的颜色,以及在开启高对比度辅助功能时对应的高对比度版本颜色。
在运行时,系统会根据当前的外观和辅助功能设置自动选择显示哪种颜色。动态颜色非常适合用于品牌色或其他应用特定颜色,它们能自动响应系统设置的变化。
开发者笔记
iOS Web
如果你熟悉 CSS 中的 @media (prefers-color-scheme: dark),你会发现它与动态颜色的概念类似!区别在于,你不再需要在媒体查询中定义所有颜色,而是在使用颜色的位置直接指定在何种情况下使用哪种颜色。设计得很巧妙!
DynamicColorIOS 功能类似于 iOS 原生方法 UIColor colorWithDynamicProvider:
示例
React TSX import {DynamicColorIOS} from 'react-native';
const customDynamicTextColor = DynamicColorIOS({ dark: 'lightskyblue', light: 'midnightblue', });
const customContrastDynamicTextColor = DynamicColorIOS({ dark: 'darkgray', light: 'lightgray', highContrastDark: 'black', highContrastLight: 'white', });