react中fixed定位按钮在底部，键盘弹起，底部按钮顶上去另类解决办法

在React中，当底部有固定的`position: fixed`定位的按钮，并且需要处理键盘弹出时遮挡内容的问题，可以采用以下几种非传统的方法来解决：

1. **利用JavaScript事件监听**:
监听设备的`resize`事件，检查窗口高度是否因为键盘弹出而改变。如果窗口高度减小，说明键盘弹起，这时你可以调整按钮的位置，让它自动上移一定的距离，如减少窗口高度的一部分。

componentDidMount() {
  window.addEventListener('resize', this.handleResize);
}

handleResize = () => {
  if (window.innerHeight < initialScreenHeight) {
    // 根据实际需求计算上下偏移量
    const offset = Math.min(window.innerHeight - initialScreenHeight, buttonOffset);
    setButtonPosition({ top: initialBottomPosition - offset });
  } else {
    setButtonPosition(initialButtonPosition);
  }
}

componentWillUnmount() {
  window.removeEventListener('resize', this.handleResize);
}

2. **使用第三方库**:
可以考虑使用像`react-keyboard-handler`这样的库来更方便地管理键盘状态，它会帮助你监听并响应键盘的显示和隐藏。

3. **利用CSS hack**:
如果你不想依赖于浏览器原生的事件，也可以通过一些CSS技巧来尝试，例如在body或viewport添加特定的CSS规则，针对键盘显示时设置一个临时的负margin-bottom给按钮。

然而，这种方法可能并不是所有环境的最佳实践，因为它可能会增加应用的复杂性和维护成本。现代的做法通常还是推荐使用官方支持的解决方案，比如在iOS上使用`keyboardAvoidingView`属性，在Android上监听`onWindowFocusChanged`事件。