メインコンテンツへスキップ

Appearance

tsx
import {Appearance} from 'react-native';

Appearanceモジュールは、ユーザーの優先カラースキーム（ライトまたはダーク）など、ユーザーの表示設定に関する情報を公開します。

開発者ノート​

Appearance API は W3C のMedia Queries draftにインスパイアされています。カラースキームの設定は、prefers-color-scheme CSS メディア機能に基づいてモデル化されています。

使用例​

Appearanceモジュールを使用して、ユーザーがダークカラースキームを好むかどうかを判断できます。

tsx
const colorScheme = Appearance.getColorScheme();
if (colorScheme === 'dark') {
  // Use dark color scheme
}

カラースキームはすぐに利用できますが、これは変更される可能性があります (例: 日の出や日の入り時のカラースキームのスケジュールされた変更)。ユーザーの優先カラースキームに依存するレンダリングロジックやスタイルは、値をキャッシュするのではなく、すべてのレンダリングでこの関数を呼び出すようにしてください。たとえば、カラースキームの更新を提供および購読するuseColorScheme React フックを使用したり、StyleSheetに値を設定するのではなくインラインスタイルを使用したりできます。

リファレンス

メソッド​

getColorScheme()​

tsx
static getColorScheme(): 'light' | 'dark' | null;

現在のユーザーが選択したカラースキームを示します。この値は、ユーザーの直接的な操作 (例: デバイス設定でのテーマ選択や、setColorSchemeによるアプリケーションレベルで選択されたユーザーインターフェーススタイル) またはスケジュール (例: 昼夜サイクルに従うライトテーマとダークテーマ) により、後で更新される場合があります。

対応するカラースキーム

  • light: ユーザーはライトカラーテーマを好む。
  • dark: ユーザーはダークカラーテーマを好む。
  • null: ユーザーは好みのカラーテーマを指定していません。

参照: useColorScheme フック。

注: Chrome でデバッグしている場合、getColorScheme() は常に light を返します。

setColorScheme()​

tsx
static setColorScheme('light' | 'dark' | null): void;

アプリケーションに常にライトまたはダークのインターフェーススタイルを適用するように強制します。デフォルト値はnullで、アプリケーションがシステムのインターフェーススタイルを継承するようになります。別の値を割り当てると、新しいスタイルはアプリケーションとアプリケーション内のすべてのネイティブ要素 (アラート、ピッカーなど) に適用されます。

対応するカラースキーム

  • light: ライトユーザーインターフェーススタイルを適用します。
  • dark: ダークユーザーインターフェーススタイルを適用します。
  • null: システムのインターフェーススタイルに従います。

注意: この変更は、システムの選択されたインターフェーススタイルや、他のアプリケーションで設定されているスタイルには影響しません。

addChangeListener()​

tsx
static addChangeListener(
  listener: (preferences: {colorScheme: 'light' | 'dark' | null}) => void,
): NativeEventSubscription;

表示設定が変更されたときに発生するイベントハンドラーを追加します。