颜色

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

Color API 提供了在 Android 和 iOS 上对平台特定颜色的类型安全访问。它封装了 React Native 的 PlatformColor，并提供完整的 TypeScript 支持，实现系统颜色的自动补全和编译时类型检查。

🌐 The Color API provides type-safe access to platform-specific colors on Android and iOS. It wraps React Native's PlatformColor with full TypeScript support, enabling autocomplete and compile-time type checking for system colors.

用法

🌐 Usage

import { Color } from 'expo-router';

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

🌐 The Color object has two platform-specific namespaces:

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

安卓颜色

🌐 Android colors

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

🌐 Android provides four categories of colors through the Color.android namespace.

基础颜色

🌐 Base colors

通过 Color.android.* 访问 Android 系统颜色。这些对应于 @android:color/ 资源。

🌐 Access Android system colors through Color.android.*. These map to @android:color/ resources.

import { Color } from 'expo-router';

// Basic colors
Color.android.black;
Color.android.white;
Color.android.transparent;

// Background colors
Color.android.background_dark;
Color.android.background_light;

请参阅 Android R.color 文档 以获取完整的可用颜色列表。

🌐 See the Android R.color documentation for the full list of available colors.

属性颜色

🌐 Attribute colors

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

🌐 Access Android theme attributes through Color.android.attr.*. These resolve colors from the current theme using ?attr/ syntax.

import { Color } from 'expo-router';

// Theme colors
Color.android.attr.colorPrimary;
Color.android.attr.colorSecondary;
Color.android.attr.colorAccent;
Color.android.attr.colorBackground;

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

🌐 See the Android R.attr documentation for more information.

Material Design 3 静态颜色

🌐 Material Design 3 static colors

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

🌐 Access Material Design 3 static colors through Color.android.material.*. These use the standard Material 3 Light/Dark theme colors.

import { Color } from 'expo-router';

// Primary colors
Color.android.material.primary;
Color.android.material.onPrimary;
Color.android.material.primaryContainer;
Color.android.material.onPrimaryContainer;

// Surface colors
Color.android.material.surface;
Color.android.material.onSurface;

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

🌐 See the Material Design 3 color roles documentation for more information about each color role.

Material Design 3 动态颜色

🌐 Material Design 3 dynamic colors

通过 Color.android.dynamic.* 访问 Material Design 3 动态颜色。动态颜色会根据用户的墙纸进行调整，使用 Android 的 动态颜色功能，该功能在 Android 12 及以上版本（API 31 及以上）可用。

🌐 Access Material Design 3 dynamic colors through Color.android.dynamic.*. Dynamic colors adapt to the user's wallpaper using Android's Dynamic Color feature, available on Android 12+ (API 31+).

import { Color } from 'expo-router';

// Dynamic colors adapt to user's wallpaper
Color.android.dynamic.primary;
Color.android.dynamic.onPrimary;
Color.android.dynamic.surface;
Color.android.dynamic.onSurface;

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

🌐 The available colors are the same as Material 3 static colors.

响应 Android 上的主题更改

🌐 Responding to theme changes on Android

Android 材料颜色（包括静态和动态）会响应系统的浅色/夜间模式。为了确保在主题更改时组件重新渲染，请使用 React Native 中的 useColorScheme() 钩子。

🌐 Android Material colors (both static and dynamic) respond to the system's light/dark mode. To ensure your component re-renders when the theme changes, use the useColorScheme() hook from React Native.

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

function MyComponent() {
  // Triggers re-render when system theme changes
  useColorScheme();

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

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

🌐 Without using useColorScheme(), the colors may not update when the user switches between light and dark mode.

当使用 React 编译器时，这一点尤其重要，因为它可以对组件进行记忆化处理，并跳过重新渲染，除非调用 useColorScheme()。

iOS 颜色

🌐 iOS colors

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

🌐 Access iOS system colors through Color.ios.*. These map directly to UIKit's standard colors and UI element colors.

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 颜色会根据系统外观（浅色/夜间模式）和辅助功能设置自动调整。

🌐 iOS colors automatically adapt to the system appearance (light/dark mode) and accessibility settings.

跨平台使用

🌐 Cross-platform usage

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

🌐 The Color API is platform-specific. Use useMemo to select the appropriate color for each platform:

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 参考

🌐 API reference