expo-system-ui

开放Beta测试文档 作为预发布开放Beta测试的一项内容，亚马逊提供了此技术文档。随着亚马逊收到反馈并对功能进行迭代，所描述的这些功能可能会发生变化。有关最新功能的信息，请参阅发布说明。

@amazon-devices/expo-system-ui允许与位于React树之外的系统用户界面元素进行交互。特别是与根视图背景颜色交互。

安装
示例
API参考
- 方法
支持的版本
其他资源

安装

在package.json文件中添加JavaScript库依赖项。

已复制到剪贴板。

 dependencies: {
     ...
     "@amazon-devices/expo-system-ui": "~2.0.0",
     "@amazon-devices/keplerscript-turbomodule-api": "~1.0.0",
 }

使用npm install命令重新安装依赖项。

示例

已复制到剪贴板。

import React, {useState} from 'react';
import {StyleSheet, View, Button} from 'react-native';
import * as SystemUI from '@amazon-devices/expo-system-ui';
import {ColorValue} from 'react-native';

export const App = () => {
  const [backgroundColor, setBackgroundColor] = useState<ColorValue | null>(
    '#0000ff',
  );

  const changeBackgroundColor = async (color: string | null) => {
    console.log(backgroundColor);
    await SystemUI.setBackgroundColorAsync(color);
    setBackgroundColor(await SystemUI.getBackgroundColorAsync());
  };

  return (
    <View style={[styles.container, backgroundColor ? {backgroundColor} : {}]}>
      <Button
        title="更改背景颜色"
        onPress={() =>
          changeBackgroundColor(
            backgroundColor === '#0000ff' ? '#ff0000' : '#0000ff',
          )
        }
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

API参考

请查看以下专门文档页面，了解有关此库、API参考等的信息：针对expo-system-ui的官方Expo文档（仅提供英文版）。

方法

方法	描述
`getBackgroundColorAsync`	获取根视图背景颜色
`setBackgroundColorAsync`	更改根视图背景颜色

支持的版本

程序包版本	基于	@amazon-devices/react-native-kepler版本
2.0.x	2.7.0	2.0.x

其他资源

有关其他库的信息，请参阅支持的第三方库和服务。

Last updated: 2025年9月30日