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モジュールで利用可能なイベントリスナーを使用できます。

例

リファレンス

Methods

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