as

Settings
Sign out
Notifications
Alexa
Amazonアプリストア
AWS
ドキュメント
Support
Contact Us
My Cases
開発
設計と開発
公開
リファレンス
サポート

expo-system-ui

expo-system-ui

@amazon-devices/expo-system-uiは、Reactツリーの外部にあるシステムUI要素とのやり取りを可能にします。具体的には、ルートビューの背景色を操作できます。

インストール

  1. package.jsonファイルにJavaScriptライブラリの依存関係を追加します。

    クリップボードにコピーしました。

     dependencies: {
         ...
         "@amazon-devices/expo-system-ui": "~2.0.0",
         "@amazon-devices/keplerscript-turbomodule-api": "~1.0.0",
     }
    
  2. 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日