useAvoidKeyboard

useAvoidKeyboard 是一个帮助固定在底部的元素避开屏幕键盘的 React Hook。它返回一个可以应用到 position: fixed 元素上的 CSS 样式，当键盘出现时平滑地将元素移动到键盘上方。

接口

function useAvoidKeyboard(
  options?: UseAvoidKeyboardOptions
): UseAvoidKeyboardResult;

参数

• optionsUseAvoidKeyboardOptions
  

  配置选项。

  • options.safeAreaBottomnumber · 0
    

    键盘隐藏时的基础底部偏移量（像素）。用于考虑 iPhone 主页指示器区域。

  • options.transitionDurationnumber · 200
    

    过渡时长（毫秒），用于平滑动画。

  • options.transitionTimingFunctionCSSProperties['transitionTimingFunction'] · 'ease-out'
    

    动画的过渡时间函数。

  • options.immediateboolean · true
    

    若为 true，则在挂载时获取初始键盘高度。

返回值

• UseAvoidKeyboardResult
  

  一个包含键盘避让 CSS 样式的对象。

  • styleCSSProperties
    

    应用到固定底部元素上的 CSS 样式对象。包含 transform 和 transition 属性。

示例

function FixedBottomCTA() {
  const { style } = useAvoidKeyboard();

  return (
    <div
      style={{
        position: 'fixed',
        bottom: 0,
        left: 0,
        right: 0,
        ...style,
      }}
    >
      <button>Submit</button>
    </div>
  );
}

// With safe area bottom offset (e.g., for iPhone home indicator)
function FixedBottomCTA() {
  const { style } = useAvoidKeyboard({ safeAreaBottom: 34 });

  return (
    <div
      style={{
        position: 'fixed',
        bottom: 0,
        left: 0,
        right: 0,
        ...style,
      }}
    >
      <button>Submit</button>
    </div>
  );
}