expo-system-ui

オープンベータ版ドキュメント：本テクニカルドキュメントは、リリース前のオープンベータ版の一部としてAmazonから提供されるものです。ここで説明されている機能は、Amazonがフィードバックを受け取り、機能の開発を繰り返す過程で変更される可能性があります。最新の機能の情報については、リリースノートを参照してください。

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

インストール
例
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="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

expo-system-ui

インストール

例

APIリファレンス

メソッド

サポートされているバージョン

関連リソース