Как обрабатывать кнопку назад, когда TexInput сфокусирован

Question

Это естественный вопрос для Android.

Как я могу обработать кнопку возврата в Android, когда TextInput сфокусирован? BackHandler.addEventListener('hardwareBackPress'. () => {}) не ловит событие, если TextInput сфокусирован. Это автоматически отклоняет клавиатуру.

(На самом деле я пытаюсь добиться удаления курсора, когда нажата кнопка "Назад" и клавиатура закрыта)

Вы можете поиграть с этой выставочной закуской, чтобы понять, о чем я говорю:

Answer 1

Я считаю, что это правильное поведение, но чтобы сделать то, что вы хотите, вы можете обнаружить скрытие клавиатуры, вместо этого с помощью клавиатуры (документы на https://facebook.github.io/react-native/docs/keyboard)

import * as React from 'react';
import { Keyboard } from 'react-native';

class MyComponent extends React.Component {
  componentDidMount() {
      this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this.keyboardDidHide);
  }

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

  keyboardDidHide = () => {
      this.input.blur();
  };

    //Rest of component...

}

Я предпочитаю этот метод, чем использование события onKeyPress из TextInput, потому что onKeyPress не будет читать аппаратные нажатия на клавиатуре, поэтому, если у пользователя есть устройство с аппаратными кнопками назад, как у некоторых устройств Android, onKeyPress не будет работать, это обеспечивает более последовательный опыт.

Answer 2

Ответ @Danilo работает, но он должен применяться ко всем текстовым вводам. Я закончил тем, что использовал решение Данило с небольшим поворотом.

Keyboard.dismiss() действительно размывает любой активный TextInput, поэтому в случае события keyboardDidHide я просто вызываю Keyboard.dismiss() (хотя клавиатуру просто закрывали нажатием кнопки назад). Мне просто нужно добавить это в мой основной компонент.

import * as React from 'react';
import { Keyboard } from 'react-native';

class MyComponent extends React.Component {
  componentDidMount() {
      this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this.keyboardDidHide);
  }

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

  keyboardDidHide = () => {
      Keyboard.dismiss();
  };

    //Rest of component...

}

Вы можете проверить это решение в этой закуске.

Если ваше приложение имеет несколько TextInputs, которые onSubmitEditing фокусируют следующий TextInput, вот как я заставил его работать:

  ...

  keyboardDidHide = () => {
      this.keyboardTimeout = setTimeout(() => Keyboard.dismiss(), 300)
  };

  keyboardDidShow = () => {
      clearTimeout(this.keyboardTimeout)
  };

  ...

Answer 3

Вы бы справились с этим на TextInput сам по себе вместо использования BackHandler, Вы можете сделать это через onKeyPress подпирать

constructor(props){
  super(props)
  this.inputRef = React.createRef()
}

<TextInput
  onKeyPress={({ nativeEvent }) => {
    if(nativeEvent.key === 'Backspace'){
      //your code
      // if you want to remove focus then you can use a ref
      Keyboard.dismiss();
      this.inputRef.blur()
    }
  }}
  ref={this.inputRef}
/>

Также важно отметить, что в Android это событие будет запускаться только на программной клавиатуре, поэтому, если вы работаете на эмуляторе и используете клавишу возврата на клавиатуре вашего компьютера, это не будет работать.