跳到主要内容
新架构实战课 实操 + 基建 + 原理全维度包揽,抢先掌握 React Native 新架构精髓 立即查看 >Version: Next

DynamicColorIOS

The DynamicColorIOS function is a platform color type specific to iOS.

DynamicColorIOS({ light: color, dark: color });

DynamicColorIOS takes a single argument as an object with two keys: dark and light. These correspond to the colors you want to use for "light mode" and "dark mode" on iOS.

In the future, more keys might become available for different user preferences, like high contrast.

At runtime, the system will choose which of the two colors to display depending on the current system appearance settings. Dynamic colors are useful for branding colors or other app specific colors that still respond automatically to system setting changes.

Developer notes

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!

示例

import { DynamicColorIOS } from 'react-native';

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