<>
  

handleFocus = () => {
  bridge
    .getKeyboardHeight()
    .then(res => {
      window.alert(res.value);
  });
}
<input onFocus={this.handleFocus} />

window.addEventListener('resize', () => {     
    if (document.activeElement.tagName == 'INPUT') {         
        //延迟出现是因为有些 Android 手机键盘出现的比较慢
         window.setTimeout(() => {             
            document.activeElement.scrollIntoViewIfNeeded();
         }, 100);
     }
});
/* 当然这段代码是行不通的, 因为scrollIntoViewIfNeeded的兼容性问题 */

window.addEventListener('resize', () => {     
    if (document.activeElement.tagName == 'INPUT') {         
        包裹document.activeElement的可滚动元素向上滚动键盘的高度
     }
});

document.body.height = window.screen.availHeight;

window.onresize = () => {
  window.alert(window.screen.availHeight);
}

window.onresize = () => {
  window.alert(document.body.clientHeight);
}

function getBoundingClientRect(element) {
  if (!element) {
    return null;
  }
  if (!element.getClientRects().length) {
    return null;
  }

  return element.getBoundingClientRect();
}

// 获取window的偏移量, 或者元素的scroll偏移量
function getScroll(target = window, isTop = true) {
  if (typeof window === 'undefined') {
    return 0;
  }

  const prop = isTop ? 'pageYOffset' : 'pageXOffset';
  const method = isTop ? 'scrollTop' : 'scrollLeft';
  const isWindow = target === window;

  const ret = isWindow ? target[prop] : target[method];

  return ret;
}

function scrollTo(target, originScrollTop, targetScrollTop) {
  if (!target) return;
  if (!isNumber(originScrollTop) || !isNumber(targetScrollTop)) return;

  const reqAnimFrame = getRequestAnimationFrame();

    let start = null;
    // 该函数的参数: 现在距离最开始触发requestAnimationFrame callback的时间间隔, 但是它的值不为0
    const frameFunc = (timestamp) => {
      if (!start) {
        start = timestamp;
      }
      const realTimestamp = timestamp - start;// 当前时间
      const isWindow = target === window;

      if (isWindow) {
        window.scrollTo(
          window.pageXOffset,
          easeInOutCubic(realTimestamp, originScrollTop, targetScrollTop, 200),
        );
      } else {
        target.scrollTop = easeInOutCubic(realTimestamp, originScrollTop, targetScrollTop, 200);
      }

      if (realTimestamp < 200) {
        reqAnimFrame(frameFunc);
      }
    };

    reqAnimFrame(frameFunc);
}

/**
 *
 * @param {*} t timestamp: 当前时间 - 动画最开始执行的那一刻
 * @param {*} b 开始状态
 * @param {*} c 结束状态
 * @param {*} d duration: 期待动画持续的时间
 */
function easeInOutCubic(t, b, c, d = 450) {
  const cc = c - b;

  t /= d / 2;
  if (t < 1) {
    return cc / 2 * t * t * t + b;
  }

  // eslint-disable-next-line
  return cc / 2 * ((t -= 2) * t * t + 2) + b;
}

function getRequestAnimationFrame() {
  return window.requestAnimationFrame
      || window.mozRequestAnimationFrame
      || window.webkitRequestAnimationFrame
      || window.msRequestAnimationFrame;
}

function bubbleInputIfNeeded() {
  const target = _target;
  const offsetBottom = _offsetBottom;

  // 获取文档当前聚焦的元素
  const { activeElement } = document;

  if (!['INPUT', 'TEXTAREA'].includes(activeElement.tagName.toUpperCase())) return;
  const rect = getBoundingClientRect(activeElement);

  if (!rect) return;

  // 判断当前focus的input底部是否在document.body可视区域内
  if (rect.bottom > document.body.clientHeight - offsetBottom) {
    prevBodyHeight = document.body.clientHeight;

    // window或者父元素已经滚动的距离
    originScrollTop = getScroll(target);

    /** 
     * 元素需要滚动的距离
     * ps: 在安卓手机上, 键盘弹起的时候, document.body的高度会减小为可视区域的高度
    */
    const elementNeedScroll = rect.bottom - document.body.clientHeight + offsetBottom;
    const targetScrollTop = originScrollTop + elementNeedScroll;

    scrollTo(target, originScrollTop, targetScrollTop);
  }
}

let eventListener;
function work() {
  if (typeof window === 'undefined') return;

  if (isAndroid()) {
    window.addEventListener('resize', eventListener = bubbleInputIfNeeded.bind(this));
  }
}

let _offsetBottom = 0;
let _target = window;

const BubbleInput = {
  setOffsetBottom(offsetBottom) {
    _offsetBottom = offsetBottom;
    return this;
  },
  setTarget(target) {
    _target = target;
    return this;
  },
  reset() {
    this.setOffsetBottom(0);
    this.setTarget(window);
    return this;
  },
  work,
  offWork() {
    this.reset();
    window.removeEventListener('resize', eventListener);
  },
};

let _instance = null;

function createBubbleInput() {
  if (!_instance) {
    _instance = BubbleInput;
  }

  return _instance;
}

export default createBubbleInput();

// src/index.js
import BubbleInput from 'bubble-input';
BubbleInput.work();

// some-page.js
import BubbleInput from 'bubble-input';
BubbleInput
  .setOffsetBottom(someButton.offsetHeight || 0)
  .setTarget(this.refs.container);

window.addEventListener('popstate', function(event) {
  // 以下代码不会执行
  console.log(event);
});

// react-router3 我们通过browserHistory.listen()来添加url变化的监听事件
import { browserHistory } from 'react-router';
browserHistory.listen(() => {
  BubbleInput.reset();
});

// react-router4 我们知道在页面中, 我们可以通过props获取history
class Page extends React.Component {
  componentDidMount() {
    this.props.history.listen(() => {
      BubbleInput.reset();
    });
  }
}

var overwrite = function(type) {
   var fn = history[type];
   return function() {
       var ret = fn.apply(this, arguments);
       var e = new Event(type);
       e.arguments = arguments;
       window.dispatchEvent(e);

       BubbleInput.reset();

       return ret;
   };
};
 history.pushState = overwrite('pushState');
 history.replaceState = overwrite('replaceState');

componentWillUnmount() {
  BubbleInput.reset();
}