This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.

expo-system-ui 可让你与 React 树之外的 UI 元素进行交互。具体来说，它可以设置根视图的背景颜色，并在 Android 上全局锁定用户界面样式。

安装

If you are installing this in an existing React Native app, make sure to install expo in your project.

在应用配置中配置

如果项目使用配置插件（连续原生生成（CNG）），则可以使用内置的配置插件来配置 expo-system-ui。该插件允许你在 应用配置 中为 Android 配置 userInterfaceStyle，并为 iOS 配置 backgroundColor。这些属性无法在运行时设置，必须构建新的应用二进制文件才能生效。如果应用不使用 CNG，则需要手动配置此库。

Example app.json with config plugin

{
  "expo": {
    "backgroundColor": "#ffffff",
    "userInterfaceStyle": "light",
    "ios": {
      "backgroundColor": "#ffffff"
    },
    "android": {
      "userInterfaceStyle": "light"
    },
    "plugins": ["expo-system-ui"]
  }
}

<resources>
  <!-- ... -->
  <string name="expo_system_ui_user_interface_style" translatable="false">light</string> <!-- or dark -->
</resources>

<plist>
  <dict>
    <!-- ... -->
    <key>UIUserInterfaceStyle</key>
    <string>Light</string> <!-- or Dark -->
  </dict>
</plist>

API

import * as SystemUI from 'expo-system-ui';

Methods

const color = await SystemUI.getBackgroundColorAsync();

SystemUI.setBackgroundColorAsync("black");