颜色主题

编辑页面

了解如何在你的应用中支持亮色和暗色模式。

应用程序通常支持浅色和深色配色方案。以下是在 Expo 项目中同时支持这两种模式的示例：

配置

对于 Android 和 iOS 项目，需要额外配置才能支持在浅色和深色模式之间切换。对于 web，不需要额外配置。

要配置支持的外观样式，你可以在项目的 app config 中使用 userInterfaceStyle 属性。默认情况下，当你使用默认模板创建新项目时，此属性会设置为 automatic。

下面是一个配置示例：

app.json

{
  "expo": {
    "userInterfaceStyle": "automatic"
  }
}

你也可以通过将 android.userInterfaceStyle 或 ios.userInterfaceStyle 设置为首选值，来为特定平台配置 userInterfaceStyle 属性。

如果缺少此属性，应用将默认使用 light 样式。

当你创建开发构建时，必须安装 expo-system-ui 以支持 Android 的外观样式。否则，userInterfaceStyle 属性会被忽略。

Terminal

- npx expo install expo-system-ui

如果项目配置错误，并且没有安装 expo-system-ui，终端中会显示以下警告：

Terminal

» android: userInterfaceStyle: 在你的项目中安装 expo-system-ui 以启用此功能。

你也可以使用以下命令检查项目是否配置错误：

Terminal

- npx expo config --type introspect

使用原生 React Native 应用？

Android

确保在 AndroidManifest.xml 中的 MainActivity（以及任何其他需要此行为的 activity）上包含 uiMode 标志：

<activity android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode">

在 MainActivity.java 中实现 onConfigurationChanged 方法：

import android.content.Intent;
import android.content.res.Configuration;
public class MainActivity extends ReactActivity {
  %%placeholder-start%%... %%placeholder-end%%

  @Override
  public void onConfigurationChanged(Configuration newConfig) {
    super.onConfigurationChanged(newConfig);
    Intent intent = new Intent("onConfigurationChanged");
    intent.putExtra("newConfig", newConfig);
    sendBroadcast(intent);
  }
  %%placeholder-start%%... %%placeholder-end%%
}

iOS

你可以在应用的 Info.plist 中使用 UIUserInterfaceStyle 键来配置支持的样式。使用 Automatic 可同时支持浅色和深色模式。

支持的外观样式

userInterfaceStyle 属性支持以下值：

automatic：跟随系统外观设置，并在用户进行任何更改时通知。
light：将应用限制为仅支持浅色主题。
dark：将应用限制为仅支持深色主题。

检测配色方案

要在项目中检测配色方案，请使用 react-native 中的 Appearance 或 useColorScheme：

src/app/index.tsx

import { Appearance, useColorScheme } from 'react-native';

然后，你可以像下面这样使用 useColorScheme() 钩子：

src/app/index.tsx

function MyComponent() {
  let colorScheme = useColorScheme();

  if (colorScheme === 'dark') {
    // 渲染一些深色内容
  } else {
    // 渲染一些浅色内容
  }
}

在某些情况下，你可能会发现通过 Appearance.getColorScheme() 获取当前配色方案，或者使用 Appearance.addChangeListener() 监听变化会很有帮助。

其他信息

最小示例

useColorScheme example

import { Text, StyleSheet, View, useColorScheme } from 'react-native';
import { StatusBar } from 'expo-status-bar';

export default function App() {
  const colorScheme = useColorScheme();

  const themeTextStyle = colorScheme === 'light' ? styles.lightThemeText : styles.darkThemeText;
  const themeContainerStyle =
    colorScheme === 'light' ? styles.lightContainer : styles.darkContainer;

  return (
    <View style={[styles.container, themeContainerStyle]}>
      <Text style={[styles.text, themeTextStyle]}>配色方案：{colorScheme}</Text>
      <StatusBar />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 20,
  },
  lightContainer: {
    backgroundColor: '#d0d0c0',
  },
  darkContainer: {
    backgroundColor: '#242c40',
  },
  lightThemeText: {
    color: '#242c40',
  },
  darkThemeText: {
    color: '#d0d0c0',
  },
});

提示

在开发项目时，你可以使用以下快捷键更改模拟器或设备的外观：

如果使用 Android 模拟器，你可以运行 adb shell "cmd uimode night yes" 来启用深色模式，运行 adb shell "cmd uimode night no" 来禁用深色模式。
如果使用实体 Android 设备或 Android 模拟器，你可以在设备设置中切换系统深色模式设置。
如果在本地使用 iOS 模拟器，你可以使用 Cmd ⌘ + Shift + a 快捷键在浅色和深色模式之间切换。