Question

我实现了一个由本机库支持的 custom react-native 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)
    }

code from TextInput

我遇到的问题是focusEmitter在上下文中未定义，我不知道上下文中提供的位置，也不知道它实际上是否适用于常规TextInput。我可以在react-native仓库中找到的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。

如何在自定义的本机TextInput中实现焦点/模糊响应

1 个答案: