expo-system-ui
expo-system-ui
オープンベータ版ドキュメント:本テクニカルドキュメントは、リリース前のオープンベータ版の一部としてAmazonから提供されるものです。ここで説明されている機能は、Amazonがフィードバックを受け取り、機能の開発を繰り返す過程で変更される可能性があります。最新の機能の情報については、リリースノートを参照してください。
@amazon-devices/expo-system-uiは、Reactツリーの外部にあるシステムUI要素とのやり取りを可能にします。具体的には、ルートビューの背景色を操作できます。
インストール
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="Change background color"
onPress={() =>
changeBackgroundColor(
backgroundColor === '#0000ff' ? '#ff0000' : '#0000ff',
)
}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});
APIリファレンス
このライブラリの情報、APIリファレンス、その他の詳細については、 Expo公式ドキュメントのexpo-system-uiのページ(英語のみ)を参照してください。
メソッド
| メソッド | 説明 |
|---|---|
getBackgroundColorAsync |
ルートビューの背景色を取得します。 |
setBackgroundColorAsync |
ルートビューの背景色を変更します。 |
サポートされているバージョン
| パッケージのバージョン | ベース | @amazon-devices/react-native-kepler version |
|---|---|---|
| 2.0.x | 2.7.0 | 2.0.x |
関連リソース
その他のライブラリについては、サポート対象のサードパーティのライブラリとサービスを参照してください。
Last updated: 2025年9月30日

