跳至主要内容

useScreenSafeArea

跟蹤 env(safe-area-inset-*) 值

Usage​

即時編輯器

function Demo() {
  const [top, right, bottom, left] = useScreenSafeArea();
  return (
    <div>
      <div>
        頂部：<>{top}</>
      </div>
      <div>
        底部：<>{bottom}</>
      </div>
      <div>
        左側：<>{left}</>
      </div>
      <div>
        右側：<>{right}</>
      </div>
    </div>
  );
}
結果
Loading...

API​

useScreenSafeArea​

Returns​

readonly [string, string, string, string, _.DebouncedFunc<() => void>]: 包含以下元素的元組：

  • 頂部安全距離。
  • 右邊安全距離。
  • 底部安全距離。
  • 左邊安全距離，
  • 手動更新函數
  • munual update function

Arguments​