首页指南参考教程

颜色主题

了解如何在你的应用中支持浅色和夜间模式。


应用支持浅色和深色配色方案很常见。以下是 Expo 项目中支持两种模式的示例:

¥It's common for apps to support light and dark color schemes. Here is an example of how supporting both modes looks in an Expo project:

配置

¥Configuration

对于 Android 和 iOS 项目,需要进行其他配置才能支持在明夜间模式之间切换。对于 Web,无需额外配置。

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

¥To configure supported appearance styles, you can use the userInterfaceStyle property in your project's app config. By default, this property is set to automatic when you create a new project with the default template.

这是一个配置示例:

¥Here is an example configuration:

app.json
{
  "expo": {
    "userInterfaceStyle": "automatic"
  }
}

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

¥You can also configure userInterfaceStyle property for a specific platforms by setting either android.userInterfaceStyle or ios.userInterfaceStyle to the preferred value.

如果此属性不存在,应用将默认为 light 样式。

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

¥When you are creating a development build, you have to install expo-system-ui to support the appearance styles for Android. Otherwise, the userInterfaceStyle property is ignored.

Terminal
npx expo install expo-system-ui

如果项目配置错误且未安装 expo-system-ui,则终端中将显示以下警告:

¥If the project is misconfigured and doesn't have expo-system-ui installed, the following warning will be shown in the terminal:

Terminal
» android: userInterfaceStyle: Install expo-system-ui in your project to enable this feature.

还可以使用以下命令检查项目是否配置错误:

¥You can also use the following command to check if the project is misconfigured:

Terminal
npx expo config --type introspect
Using bare React Native app?

安卓

¥Android

确保 AndroidManifest.xml 中的 MainActivity(以及需要此行为的任何其他活动)上存在 uiMode 标志:

¥Ensure that the uiMode flag is present on your MainActivity (and any other activities where this behavior is desired) in AndroidManifest.xml:

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

在 MainActivity.java 中实现 onConfigurationChanged 方法:

¥Implement the onConfigurationChanged method in MainActivity.java:

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 系统

¥iOS

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

¥You can configure supported styles with the UIUserInterfaceStyle key in your app Info.plist. Use Automatic to support both light and dark modes.

支持的外观样式

¥Supported appearance styles

userInterfaceStyle 属性支持以下值:

¥The userInterfaceStyle property supports the following values:

  • automatic:遵循系统外观设置并通知用户所做的任何更改。

    ¥automatic: Follow system appearance settings and notify about any change the user makes.

  • light:限制应用仅支持浅色主题。

    ¥light: Restrict the app to support light theme only.

  • dark:限制应用仅支持深色主题。

    ¥dark: Restrict the app to support dark theme only.

检测配色方案

¥Detect the color scheme

要检测项目中的配色方案,请使用 react-native 中的 AppearanceuseColorScheme

¥To detect the color scheme in your project, use Appearance or useColorScheme from react-native:

app/index.tsx
import { Appearance, useColorScheme } from 'react-native';

然后,你可以使用 useColorScheme() 钩子,如下所示:

¥Then, you can use useColorScheme() hook as shown below:

app/index.tsx
function MyComponent() {
  let colorScheme = useColorScheme();

  if (colorScheme === 'dark') {
    // render some dark thing
  } else {
    // render some light thing
  }
}

在某些情况下,你会发现使用 Appearance.getColorScheme() or listen to changes with Appearance.addChangeListener() 强制获取当前配色方案很有帮助。

¥In some cases, you will find it helpful to get the current color scheme imperatively with Appearance.getColorScheme() or listen to changes with Appearance.addChangeListener().

附加信息

¥Additional information

最小的例子

¥Minimal example

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]}>Color scheme: {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',
  },
});

提示

¥Tips

在开发项目时,你可以使用以下快捷方式更改模拟器或设备的外观:

¥While you are developing your project, you can change your simulator's or device's appearance by using the following shortcuts:

  • 如果使用 Android 模拟器,你可以运行 adb shell "cmd uimode night yes" 来启用夜间模式,运行 adb shell "cmd uimode night no" 来禁用夜间模式。

    ¥If using an Android Emulator, you can run adb shell "cmd uimode night yes" to enable dark mode, and adb shell "cmd uimode night no" to disable dark mode.

  • 如果使用物理 Android 设备或 Android 模拟器,你可以在设备的设置中切换系统夜间模式设置。

    ¥If using a physical Android device or an Android Emulator, you can toggle the system dark mode setting in the device's settings.

  • 如果在本地使用 iOS 模拟器,你可以使用 Cmd ⌘ + Shift + a 快捷键在浅色和夜间模式之间切换。

    ¥If working with an iOS emulator locally, you can use the Cmd ⌘ + Shift + a shortcut to toggle between light and dark modes.

Expo 中文网 - 粤ICP备13048890号