Render Error: "Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined

Question

到目前为止，我只是在一个新应用程序中安装了这个：

import React from 'react';
import { View } from 'react-native';
import { Header } from './components/Header';


const App = () => {
  return (
    <View>
      <Header withTitle='AppTitle' />
    </View>
  );
};

export default App;

而Header在上述文件夹中的定义如下：

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Icon } from 'react-native-vector-icons/Octicons';


const styles = StyleSheet.create({
    header: {
        width: '100%',
        height: 60,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',

    },
    headerText: {
        fontWeight: 'bold',
        fontSize: 20,
        color: '#000000',
        letterSpacing: 1,
    },
    headerIcon: {
        position: 'absolute',
        left: 16,
    }
});


const Header = ({withTitle}) => {
    return (
        <View>
            <Icon name='three-bars' size={30} style={styles.headerIcon} />
            <View style={styles.header}>
                <Text style={styles.headerText}>{withTitle}</Text>
            </View>
        </View>    
    );
};


export default Header;

我尝试了各种导入方法，但 undefined 让我相信组件没有返回，但我看不到返回的位置。

Answer 1

尝试以这种方式导入

import Icon from 'react-native-vector-icons/Octicons';

Answer 2

当一个函数或组件是 exported default 时，我们导入它时不带大括号，当它只是导出时，我们用大括号导入它。

在您的情况下，您导出 Header default。所以，你必须像下面这样导入它：

import Header from './components/Header';

并且 react-native-vector-icons 中的所有图标都默认导出为：

export default Icon;

所以，你必须像下面这样导入它：

import Icon from 'react-native-vector-icons/Octicons';