Как обработать кнопку возврата, когда 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

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

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 prop

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 это событие будет запускаться только на программной клавиатуре, поэтому, если вы работаете на эмуляторе и используете клавишу возврата на клавиатуре компьютера, это не будет работать.