Comment détecter quand le clavier est ouvert ou fermé dans React Native

Question

Comment détecter si l’utilisateur fermer le clavier dans réagir natif, je veux appeler une fonction lorsque l’utilisateur a fermé le clavier.

et si vous pouvez répondre pour détecter le clavier est ouvert aussi, il sera apprécié, merci.

Je suis sur la réaction natif plus tard``

Answer 1

Merci les gars pour vos réponses. Voici la version crochets si quelqu’un est intéressé:

Answer 2

1. Vous pouvez utiliser la classe Clavier de facebook.

Voici un exemple de code.

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. Vous pouvez utiliser un autre mnp dépendance aussi, à l'instar de réagir-native-clavier-auditeur.

Importer le composant dans le fichier que vous souhaitez utiliser:

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

Utiliser le composant directement dans votre code. Le composant de ne pas tout rendre

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

Pour installer cette dépendance exécuter commande ci-dessous.

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

Choisissez tout de vous sentir plus commode.

Answer 3

Version améliorée de la réponse de @Khemraj (qui a très bien fonctionné pour moi) avec des méthodes liées à l’instance afin d’être en mesure de mettre à jour l’état du composant de l’auditeur et re-rendu.