反应高阶组件无法正常工作

Question

我写了一个反应更高阶的组件，如下所示：

import React, { Component } from 'react';
import { TouchableWithoutFeedback } from 'react-native'
const dismissKeyboard = require('dismissKeyboard')
export default (WrappedComponent) => class AutoHideKeyboard extends Component {
    render() {
        return (
            <TouchableWithoutFeedback onPress={dismissKeyboard}>
                <WrappedComponent {...this.props}/>
            </TouchableWithoutFeedback>
        )
    }
}

但是当我按下页面时，它的onPress功能不起作用。

然后我尽量不使用更高阶的组件，而是直接将组件包装成如下：

import React, { Component } from 'react';
import { TouchableWithoutFeedback } from 'react-native'
const dismissKeyboard = require('dismissKeyboard')
export default class Demo extends Component {
    render() {
        return (
            <TouchableWithoutFeedback onPress={dismissKeyboard}>
                <View>
                   //some components like TextInput
                </View>
            </TouchableWithoutFeedback>
        )
    }
}

这一次确实有效。 为什么这两种方式表现不同？