当键盘打开时，TouchableHighlight无法接收按压事件。

Question

我有一个组件，其中包含一个TextInput和一个TouchableHighlight并排。您点击文本框，键入您想要的内容，然后点击添加按钮以保存它。现在的问题是，键盘从键入时打开，您需要将其关闭，否则按钮将不会响应。如果我首先点击按钮，则键盘被解除，然后第二次点击才有效。我觉得我应该能够一次完成两个操作。这是我的渲染组件：

class FormInput extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text: null
    };
  }
  componentDidMount() {
    this.refs.textInput.focus();
  }

  _changeTextEvent(event) {
    this.setState({
      text: event.nativeEvent.text
    });
  }

  render() {
    var style = [styles.textBox];
    if (this.props.errors.length > 0) {
      style.push(styles.errorTextBox);
    }
    var errors = null;
    if (this.props.errors.length > 0) {
      errors = this.props.errors.map((msg) => {
        return (<Text style={styles.errorLabel}>{msg}</Text>);
      });
    }
    return (
      <View>
        <View style={styles.container}>
          <TextInput
            ref='textInput'
            style={style}
            onChange={this._changeTextEvent.bind(this)}
            autoFocus={true}
          />
          <TouchableHighlight underlayColor="#96DBFF" style={styles.addButton} onPress={() => { this.props.pressEvent(this.state.text) }}>
            <Text style={styles.addButtonText}>Add</Text>
          </TouchableHighlight>
        </View>
        <View>{errors}</View>
      </View>
    );
  }
}

- agmcleod

---

我遇到了同样的问题。如果我找到解决方法，我会更新的。 - Fractaly

Answer 1

请查看关于调用文本框的blur来取消它的讨论：

https://github.com/facebook/react-native/issues/113

此外，我刚在模拟器上测试了一下，当TextInput聚焦并且键盘弹起时，TouchableHighlight确实会响应事件。可以通过添加如下代码来实现：

pressEvent() {
    this.refs.textInput.blur();
}

我可以从TouchableHighlight上隐藏键盘。

- Colin Ramsay

---

谢谢回复。我调整了我的TouchableHighlight onPress事件，使用组件上的一个方法：_pressEvent() { this.refs.textInput.blur(); this.props.pressEvent(this.state.text); } 但是它不起作用。如果我在这个方法上放一个断点，它直到键盘消失后才会触发。可能有其他东西捕获了事件吗？ - agmcleod

该组件在ScrollView内呈现。在scrollview文档中，它确实说：“尚不支持其他包含的响应者阻止此滚动视图成为响应者。” - agmcleod

是的，我把表单组件移到了滚动视图之外，现在按钮可以响应了。 - agmcleod

ScrollView现在有一个名为keyboardshouldpersisttaps的选项，可以检查http://facebook.github.io/react-native/docs/scrollview.html#keyboardshouldpersisttaps - Bruno Lemos