Dimensions

useWindowDimensions は React コンポーネントにとって推奨される API です。Dimensions とは異なり、ウィンドウの寸法が更新されると更新されます。これは React のパラダイムとうまく連携します。

tsx

import {Dimensions} from 'react-native';

以下のコードでアプリケーションウィンドウの幅と高さを取得できます。

tsx

const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;

寸法はすぐに利用可能ですが、変更される可能性があるため (例: デバイスの回転、折りたたみ式デバイスなど)、これらの定数に依存するレンダリングロジックやスタイルは、値をキャッシュするのではなく (たとえば、StyleSheet で値を設定するのではなくインラインスタイルを使用する)、すべてのレンダリングでこの関数を呼び出すように試みる必要があります。

折りたたみ式デバイスや、画面サイズまたはアプリのウィンドウサイズを変更できるデバイスを対象とする場合は、以下の例に示すように、Dimensions モジュールで利用可能なイベントリスナーを使用できます。

使用例

リファレンス

メソッド

addEventListener()

tsx

static addEventListener(
  type: 'change',
  handler: ({
    window,
    screen,
  }: DimensionsValue) => void,
): EmitterSubscription;

イベントハンドラを追加します。サポートされているイベント:

• change: Dimensions オブジェクト内のプロパティが変更されたときに発生します。イベントハンドラへの引数は DimensionsValue 型のオブジェクトです。

---

get()

tsx

static get(dim: 'window' | 'screen'): ScaledSize;

初期の寸法は runApplication が呼び出される前に設定されるため、他の require が実行される前に利用可能であるはずですが、後で更新される可能性があります。

例: const {height, width} = Dimensions.get('window');

パラメータ

名前	型	説明
dim 必須	string	set を呼び出したときに定義されたディメンションの名前。ディメンションの値を返します。

Androidの場合、window の寸法には、ステータスバー (半透明でない場合) と 下部ナビゲーションバー によって使用されるサイズは含まれません。

---

型定義

DimensionsValue

プロパティ

名前	型	説明
window	ScaledSize	表示可能なアプリケーションウィンドウのサイズ。
screen	ScaledSize	デバイスの画面サイズ。

ScaledSize

型
object

プロパティ

名前	型
width	number
height	number
scale	number
fontScale	number