Как обнаружить, когда клавиатура открыта или закрыта в React Native

Как обнаружить, что пользователь закрывает клавиатуру в ответном режиме native, я хочу вызвать функцию, когда пользователь закрыл клавиатуру.

и если вы можете ответить, чтобы обнаружить, что клавиатура открыта тоже, это будет оценено, спасибо.

Я нахожусь в последней version 0.56 родной version 0.56

Ответ 1

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, например response-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

Выберите любой, который вам удобнее.

Ответ 2

Улучшенная версия ответа @Khemraj (которая отлично сработала для меня) с привязанными методами к экземпляру, чтобы иметь возможность обновлять состояние компонента из слушателя и выполнять повторную визуализацию.

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

class Example extends Component {

  state = {
      keyboardState: 'closed'
  }

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

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

  _keyboardDidShow = () => {
    this.setState({
        keyboardState: 'opened'
    });
  }

  _keyboardDidHide = () => {
    this.setState({
        keyboardState: 'closed'
    });
  }

  render() {
    return (
      <TextInput
        onSubmitEditing={Keyboard.dismiss}
      />
    );
  }
}

Ответ 3

Спасибо, ребята, за ваши ответы. Вот версия хуков, если кому-то интересно:

const [isKeyboardVisible, setKeyboardVisible] = useState(false);

 useEffect(() => {
    const keyboardDidShowListener = Keyboard.addListener(
      'keyboardDidShow',
      () => {
        setKeyboardVisible(true); // or some other action
      }
    );
    const keyboardDidHideListener = Keyboard.addListener(
      'keyboardDidHide',
      () => {
        setKeyboardVisible(false); // or some other action
      }
    );

    return () => {
      keyboardDidHideListener.remove();
      keyboardDidShowListener.remove();
    };
  }, []);