Как реализовать отклик фокуса / размытия в пользовательском реагирующем TextInput

Question

Я реализовал пользовательский реагирующий родной TextInput, поддерживаемый собственной библиотекой. Он работает довольно хорошо, за исключением того, что когда я нажимаю за пределами текстового поля, он не размывается автоматически и клавиатура не исчезает. Я тоже пробовал с Keyboard.dismiss(), тоже не работает. Я посмотрел на «официальную» реализацию TextInput, чтобы воспроизвести ее без какого-либо успеха.

Я добавил этот код в свою пользовательскую реализацию (componentDidMount)

    if (this.context.focusEmitter) {
      this._focusSubscription = this.context.focusEmitter.addListener(
        'focus',
        el => {
          if (this === el) {
            this.requestAnimationFrame(this.focus);
          } else if (this.isFocused()) {
            this.blur();
          }
        },
      );
      if (this.props.autoFocus) {
        this.context.onFocusRequested(this);
      }
    } else {
      if (this.props.autoFocus) {
        this.requestAnimationFrame(this.focus);
      }
    }

и я также определил требуемый contextTypes

    static contextTypes = {
      focusEmitter: PropTypes.instanceOf(EventEmitter)
    }

код из TextInput

Проблема, с которой я столкнулся, заключается в том, что focusEmitter не определен в контексте, и я понятия не имею, откуда он предоставляется в контексте, и действительно ли он работает так же, как обычный TextInput. Единственный случай focusEmitter, который я мог найти в репозитории реактивной системы, - это NavigatorIOS, который я даже не использую в своем приложении. Может ли кто-нибудь объяснить мне это?

Answer 1

Более простой способ сделать то, что вы хотите, это использовать Keyboard.dismiss() на TouchableWithoutFeedback, как в следующем примере:

import {Keyboard} from 'react-native';
...
render(){
  return(
    <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
      <View>
        // Return everything here
        <TextInput />
      </View>
    </TouchableWithoutFeedback>
  )
}

Поэтому, если вы нажмете за пределами ввода, клавиатура будет закрыта и размыт TextInput.