useScreenSafeArea

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

Usage

实时编辑器

function Demo() {
  const [top, right, bottom, left] = useScreenSafeArea();
  return (
    <div>
      <div>
        top: <>{top}</>
      </div>
      <div>
        bottom: <>{bottom}</>
      </div>
      <div>
        left: <>{left}</>
      </div>
      <div>
        right: <>{right}</>
      </div>
    </div>
  );
}

结果

Loading...

API

useScreenSafeArea

Returns

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

• 顶部安全距离。
• 右边安全距离。
• 底部安全距离。
• 左边安全距离，
• 手动更新函数

Arguments