颜色

编辑页面

在 Expo Router 中以类型安全的方式访问平台特定颜色。

Color API 提供了对 Android 和 iOS 平台特定颜色的类型安全访问。它对 React Native 的 PlatformColor 进行了封装，并提供完整的 TypeScript 支持，从而为系统颜色启用自动补全和编译期类型检查。

用法

import { Color } from 'expo-router';

Color 对象有两个平台特定的命名空间：

Color.android.* - Android 颜色，包括基础颜色、属性和 Material Design 3 颜色
Color.ios.* - 来自 UIKit 的 iOS 系统颜色

Android 颜色

Android 通过 Color.android 命名空间提供四类颜色。

基础颜色

通过 Color.android.* 访问 Android 系统颜色。这些映射到 @android:color/ 资源。

import { Color } from 'expo-router';

// 基础颜色
Color.android.black;
Color.android.white;
Color.android.transparent;

// 背景颜色
Color.android.background_dark;
Color.android.background_light;

有关可用颜色的完整列表，请参阅 Android R.color 文档。

属性颜色

通过 Color.android.attr.* 访问 Android 主题属性。这些使用 ?attr/ 语法从当前主题中解析颜色。

import { Color } from 'expo-router';

// 主题颜色
Color.android.attr.colorPrimary;
Color.android.attr.colorSecondary;
Color.android.attr.colorAccent;
Color.android.attr.colorBackground;

有关更多信息，请参阅 Android R.attr 文档。

Material Design 3 静态颜色

通过 Color.android.material.* 访问 Material Design 3 静态颜色。这些使用标准的 Material 3 浅色/深色主题颜色。

import { Color } from 'expo-router';

// 主色
Color.android.material.primary;
Color.android.material.onPrimary;
Color.android.material.primaryContainer;
Color.android.material.onPrimaryContainer;

// 表面色
Color.android.material.surface;
Color.android.material.onSurface;

有关每种颜色角色的更多信息，请参阅 Material Design 3 颜色角色文档。

Material Design 3 动态颜色

通过 Color.android.dynamic.* 访问 Material Design 3 动态颜色。动态颜色会使用 Android 的 Dynamic Color 功能适配用户的壁纸，可在 Android 12+（API 31+）上使用。

import { Color } from 'expo-router';

// 动态颜色会适配用户的壁纸
Color.android.dynamic.primary;
Color.android.dynamic.onPrimary;
Color.android.dynamic.surface;
Color.android.dynamic.onSurface;

可用颜色与 Material 3 静态颜色相同。

响应 Android 上的主题变化

Android Material 颜色（静态和动态）都会响应系统的浅色/深色模式。为了确保组件在主题变化时重新渲染，请使用 React Native 的 useColorScheme() hook。

import { Color } from 'expo-router';
import { View, Text, useColorScheme } from 'react-native';

function MyComponent() {
  // 当系统主题变化时触发重新渲染
  useColorScheme();

  return (
    <View style={{ backgroundColor: Color.android.dynamic.surface }}>
      <Text style={{ color: Color.android.dynamic.onSurface }}>Hello, World!</Text>
    </View>
  );
}

如果不使用 useColorScheme()，当用户在浅色和深色模式之间切换时，颜色可能不会更新。

这一点在使用 React Compiler 时尤其重要，因为它可能会对组件进行缓存，并跳过重新渲染，除非调用了 useColorScheme()。

iOS 颜色

通过 Color.ios.* 访问 iOS 系统颜色。这些会直接映射到 UIKit 的标准颜色和 UI 元素颜色。

import { Color } from 'expo-router';
import { View, Text } from 'react-native';

function MyComponent() {
  return (
    <View style={{ backgroundColor: Color.ios.systemBackground }}>
      <Text style={{ color: Color.ios.label }}>Hello, World!</Text>
    </View>
  );
}

iOS 颜色会自动适配系统外观（浅色/深色模式）和辅助功能设置。

跨平台使用

Color API 是平台特定的。使用 useMemo 为每个平台选择合适的颜色：

import { Platform, View, Text } from 'react-native';
import { Color } from 'expo-router';

function MyComponent() {
  const backgroundColor = Platform.select({
    ios: Color.ios.systemBackground,
    android: Color.android.dynamic.surface,
    default: '#000000',
  });

  const textColor = Platform.select({
    ios: Color.ios.label,
    android: Color.android.dynamic.onSurface,
    default: '#FFFFFF',
  });

  return (
    <View style={{ backgroundColor }}>
      <Text style={{ color: textColor }}>Hello, World!</Text>
    </View>
  );
}

API 参考

Color API 参考

有关可用类型和颜色的完整列表，请参阅 Expo Router 的 Color API 参考。