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

Appearance

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

Appearanceモジュールは、ユーザーの外観設定（推奨されるカラースキーム（ライトまたはダーク）など）に関する情報を公開します。

開発者向けメモ​

情報

Appearance APIは、W3CのMedia Queriesドラフトに触発されています。カラースキームの好みは、prefers-color-scheme CSSメディア機能をモデルにしています。

例​

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

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

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

リファレンス

Methods​

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;

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