Как определить, отображается ли мобильная клавиатура в сети?

Question

Я использовал код ниже, но когда клавиатура видна, ничего не происходит. Я проверил и window.screen.height не меняется.

class TestPage extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      keyboardIsShown: false,
    };
  }

  componentDidMount() {
    this.initialScreenSize = window.screen.height;

    this.keyboard = setInterval(() => {
      if (this.initialScreenSize !== window.screen.height) {
        !this.state.keyboardIsShown && this.setState({ keyboardIsShown: true });
      } else {
        this.state.keyboardIsShown && this.setState({ keyboardIsShown: false });
      }
    }, 800);
  }

  componentWillUnmount() {
    clearInterval(this.keyboard);
  }

  ...
}

Answer 1

Решено для Android устройств с использованием window.innerHeight.

class TestPage extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      keyboardIsShown: false,
    };
  }

  componentDidMount() {
    this.initialScreenSize = window.innerHeight;

    this.keyboard = setInterval(() => {
      if (this.initialScreenSize !== window.innerHeight) {
        !this.state.keyboardIsShown && this.setState({ keyboardIsShown: true });
      } else {
        this.state.keyboardIsShown && this.setState({ keyboardIsShown: false });
      }
    }, 800);
  }

  componentWillUnmount() {
    clearInterval(this.keyboard);
  }

  ...
}