react-native: IOS TouchableHighlight need tap twice to trigger onPress function

In my Project, I have a TextInput and a TouchableHighlight , the code is below:

export default class CommentInput extends Component {
    static propTypes = {
        visible: React.PropTypes.bool,
        onFocus: React.PropTypes.func,
        placeholder: React.PropTypes.string,
        text: React.PropTypes.string,
        onSubmit: React.PropTypes.func,
        onHideTextInput: React.PropTypes.func
    };
    constructor(props) {
        super(props);
        this._textInput = null;
        this.state = {
            visible: this.props.visible || false,
            placeholder: this.props.placeholder || '',
            text: this.props.value || '',
            keyboardHeight: 0
        }
    }
    componentWillUnmout() {
        console.log(this._textInput);
        this._textInput && this._textInput.blur();
    }
    renderInput = () => {
        return <View style={styles.container}>
                <TextInput
                    textAlignVertical="top"
                    underlineColorAndroid="transparent"
                    value={this.state.text}
                    onFocus={this.props.onFocus}
                    autoCapitalize="none"
                    allowFontScaling={false}
                    onChangeText={this._onChangeText}
                    ref={textInput => {this._textInput = textInput}}
                    placeholder={this.state.placeholder}
                    multiline={true}
                    autoFocus={true}
                    onBlur={this._textPress}
                    onPress={this._textPress}
                    style={styles.textInput} />
                <View style={styles.btnWrap}>
                    <Button
                        underlayColor={'#f00'}
                        onPress={this.state.text ? this._checkLogin : null}
                        textStyle={styles.btnText}
                        style={[styles.btn, this.state.text.trim() ? null : styles.opacity]}>发表</Button>
                </View>
                {
                    Platform.OS === 'ios' ?  <KeyboardSpacer/> : null
                }
            </View>
    };
    _onChangeText = (text) => {
        this.setState({
            text: text
        });
        this.props.onChangeText && this.props.onChangeText(text);
    };
    _checkLogin = async () => {
        let isLogin = await invoke('Account.isLogin');
        if (isLogin.result) {
            this._onSubmit();
        }
        else {
            let data = await invoke('Account.login', {source: 'Comment'});
            if (data.result) {
                this._onSubmit();
            }
        }
    };
    _onSubmit = () => {
        this.props.onSubmit(this.state.text);
    };
    _textPress = () => {
        alert('123');
    };
    render() {
        return this.props.visible ? this.renderInput() : null
    }
}

and in another file：

{
                  this.state.showMask ? <TouchableWithoutFeedback ll="ll" onPress={this._hideTextInput}>
                      <View style={styles.markView}></View>
                  </TouchableWithoutFeedback> : null
              }
              <CommentInput
                  onSubmit={this._listenSubmit}
                  visible={this.state.showMask} />

when I use the keyboard to input some words and press the TouchableWithoutFeedback at the same times, several times , the TouchableWithoutFeedback need to tap twice to trigger the onPress function. how to solve this bug?