Dimensions

useWindowDimensionsは、Reactコンポーネントの推奨APIです。Dimensionsとは異なり、ウィンドウの大きさが更新されると更新されます。Reactの方式でうまく動作します。

import {Dimensions} from 'react-native';

以下は、アプリケーションのウィンドウの幅と高さを取得するためのコードです。

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

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

折りたたみ可能なデバイスや画面のサイズもしくはアプリのウィンドウのサイズを変更できるデバイスをターゲットにしている場合、次の例に示すように、Dimensionsモジュールで使用できるイベントリスナーを使用できます。

例

リファレンス

メソッド

`addEventListener()`

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

イベントハンドラを追加します。対応するイベント

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

`get()`

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

タイプ
オブジェクト

プロパティ

名前	タイプ
幅	数値
高さ	数値
スケール	数値
フォントスケール	数値

例​

リファレンス

メソッド​

addEventListener()​

get()​

型の定義​

DimensionsValue​

ScaledSize​

例