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 模組中提供的事件監聽器，如下例所示。

範例

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

新增事件處理器。支援的事件

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

初始尺寸在呼叫 runApplication 之前設定，因此它們應該在執行任何其他 require 之前可用，但稍後可能會更新。

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

參數

名稱	型別	描述
dim 必填	字串	呼叫 `set` 時定義的尺寸名稱。傳回尺寸的值。

對於 Android，window 尺寸將排除 狀態列（如果不是半透明）和 底部導航列 使用的尺寸

屬性

名稱	型別	描述
window	ScaledSize	可見應用程式視窗的大小。
screen	ScaledSize	裝置螢幕的大小。

型別
物件

屬性