react-native - 键盘启动时如何隐藏组件？

Question

除了安装软件包之外，有没有办法在键盘显示时隐藏组件？

标签： react-nativereact-native-android

Answer 1

使用键盘文档中的代码示例，我会做这样的事情：

class Example extends Component {
  state = {keyboardOpen: false};

  componentDidMount() {
    this.keyboardDidShowListener = Keyboard.addListener(
      'keyboardDidShow',
      this._keyboardDidShow,
    );
    this.keyboardDidHideListener = Keyboard.addListener(
      'keyboardDidHide',
      this._keyboardDidHide,
    );
  }

  componentWillUnmount() {
    this.keyboardDidShowListener.remove();
    this.keyboardDidHideListener.remove();
  }

  _keyboardDidShow() {
    this.setState({
      keyboardOpen: true
    });
  }

  _keyboardDidHide() {
    this.setState({
      keyboardOpen: false
    });
  }

  render() {
    return (
      {!this.state.keyboardOpen && <MyComponent />}
    );
  }
}

基本上，在componentDidMount您订阅show和hide键盘事件。您可以跟踪组件中的键盘当前状态，state并根据方法中的值有条件地this.state.keyboardOpen显示。MyComponentthis.state.keyboardOpenrender