[解決済み] React Nativeでキーボードの開閉を検出する方法

質問

react nativeでユーザーがキーボードを閉じたかどうかを検出する方法。

とキーボードが開いていることを検出するために答えることができれば、それは感謝されます、ありがとう。

私はreact nativeの最新版で version 0.56

どのように解決するのですか？

1. あなたは、使用することができます キーボードクラス facebookからです。

以下はサンプルコードです。

import React, { Component } from 'react';
import { Keyboard, TextInput } from 'react-native';

class Example extends Component {
  componentWillMount () {
    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
  }
    
  componentWillUnmount () {
    this.keyboardDidShowListener.remove();
    this.keyboardDidHideListener.remove();
  }
    
  _keyboardDidShow () {
    alert('Keyboard Shown');
  }
    
  _keyboardDidHide () {
    alert('Keyboard Hidden');
  }
    
  render() {
    return (
      <TextInput
        onSubmitEditing={Keyboard.dismiss}
      />
    );
  }
}

###2. 他のnpmの依存関係も使用できます、例えば react-native-keyboard-listener .

コンポーネントを使用したいファイルにインポートします。

import KeyboardListener from 'react-native-keyboard-listener';

あなたのコードで直接コンポーネントを使用してください。コンポーネントは何もレンダリングしません

<View>
  <KeyboardListener
    onWillShow={() => { this.setState({ keyboardOpen: true }); }}
    onWillHide={() => { this.setState({ keyboardOpen: false }); }}
  />
</View>

この依存関係をインストールするには、以下のコマンドを実行してください。

npm install --save react-native-keyboard-listener

より便利と思われるものをお選びください。