website

Javascript/Typescript ReactNative Tech

【React Native】画面サイズの取得

2021年11月21日

本記事では画面サイズの取得方法を紹介します。

画面サイズ取得モジュール:Dimensions

ReactNativeでは、画面サイズを取得するためにDimensionsというモジュールが用意されています。

https://reactnative.dev/docs/dimensions

実際に利用した例がこちらになります。

この例では、画面サイズ(window or screen)をDimensions.get("〇〇")で取得しています。

Dimensions.get("〇〇")で取得できるのは、実際には複数情報(width, height, scale, fontScale)です。

さらに、Dimensions.addEventListener("change", function)で、画面サイズが可変に変わる際に動的に数値を取得できるように対応しています。

subscription?.remove()は登録したイベントリスナーを解除します。

useEffectreturnとして記述されているので、マウントが外れる時(画面遷移する時)に呼ばれます。

WindowとScreenの違いは何?

Dimensionsでは2つの画面範囲からサイズを取得できます。

公式サイトの説明は次の通り。

windowSize of the visible Application window.
screenSize of the device's screen.

日本語で言うと、

  • windowは、アプリケーションの可視領域(ウィンドウ)サイズ。
  • screenは、デバイスのスクリーンサイズ。

下記の画像が先程のコード例を全画面で見たスクリーンキャプチャになります。

緑色の線で囲まれた部分がScreen領域、赤色の線で囲まれた部分がWindow領域になります。

useWindowDimensionsを使えばもっとシンプルに

useWindowDimensionsを使えばもっとシンプル&フレキシブルに画面サイズを取得することができます。

次のコードが、useWindowDimensionsを使った例です。

Dimensions.get("〇〇")では、useEffectDimensions.addEventListener("change", function)を利用して、フレキシブルに画面サイズを取得しました。

useWindowDimensionsを利用すると、useEffect内の処理を実現することができます。

とてもシンプルになりましたね。

-Javascript/Typescript, ReactNative, Tech,
-, , , , ,