跳到主要內容

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',
});