commun组件内的图标引发错误

我正在尝试建立一个移动应用程序,并使我的代码干净,我决定创建我将经常使用的commun组件。

我想创建一个验证按钮组件,如下所示:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { TouchableOpacity, Text, Icon } from 'react-native';
import styles from './styles';

/**
 * @export
 * @class ValidateButton
 * @extends {Component}
 */
export default class ValidateButton extends Component {
    /**
     * default props
     *
     * @static
     * @memberof ValidateButton
     */
    static defaultProps = {
      enabled: true,
    };

    /**
     * props validation
     *
     * @static
     * @memberof ValidateButton
     */
    static propTypes = {
      enabled: PropTypes.bool,
      clickHandler: PropTypes.func.isRequired,
      label: PropTypes.string.isRequired,
    };

  /**
   * Render the validation button
   *
   * @returns {object}
   * @memberof ValidateButton
   */
    render() {
      return (
        <TouchableOpacity style={styles.footerBoldButton} onPress={this.props.enabled && this.props.clickHandler}>
          <Icon name="check" type="material" color="#FFF" iconStyle={styles.footerBoldButtonIcon} size={16} />
          <Text style={styles.footerBoldButtonText}>{this.props.label}</Text>
        </TouchableOpacity>
      );
    }
}

我的问题是,当我调用我的组件时,会显示一个错误:

 Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

奇怪的是,当我删除 Icon 它工作的元素。

有人解释吗?