元素类型无效：应为字符串或类/函数，但得到：未定义答案

【问题标题】：Element type is invalid: expected a string or a class/function but got: undefined元素类型无效：应为字符串或类/函数，但得到：未定义
【发布时间】：2019-07-08 10:46:50
【问题描述】：

这是我的组件，我在文件末尾的 Home 组件中导出了 Home。该代码在 React Native 中运行良好，但我目前正在将其移植到 expo 并且它停止工作。我也读过它与进口有关，但我没有那么多。

import React, { Component } from 'react';
import { Text, View } from 'react-native';

import Home from './src/views/containers/home'
import Header from './src/sections/components/header'
import SuggestionList from './src/videos/containers/suggestion-list'
import CategoryList from './src/videos/containers/category-list'
import Player from './src/player/containers/player'

import API from './utils/api'
export default class App extends Component<{}> {
  state = {
    suggestionList: [],
    categoryList: []
  }

  async componentDidMount() {
    //some code
  }
  render() {
    return (
      <Home> //Line 28
        <Header/>
        <Player/>
        <Text>Search</Text>
        <Text>Categories</Text>
        <CategoryList 
          list={this.state.categoryList}
        />
        <SuggestionList 
          list={this.state.suggestionList}
        />

      </Home>
    )
  }
}

我收到了这个错误

Check the render method of `App`.

This error is located at:
in Home (at App.js:28)
in App (at withExpoRoot.js:20)
in RootErrorBoundary (at withExpoRoot.js:19)
in ExpoRootComponent (at renderApplication.js:35)
in RCTView (at View.js:45)
in View (at AppContainer.js:98)
in RCTView (at View.js:45)
in View (at AppContainer.js:115)
in AppContainer (at renderApplication.js:34)

我是不是导入有问题？

Home 只是一个包装器

import React, {Component} from 'react';

class Home extends Component {
    render(){
        return this.props.children
    }
}

export default Home;

错误实际上是在播放器中，我有一个错误的导入，但它说我得到了同样的错误，但我的 playPause 组件。在第 13 行

import React from 'react'
import {
    TouchableHighlight,
    StyleSheet,
    Platform,
} from 'react-native'

import Icon from '@expo/vector-icons'

function PlayPause(props) {
    return (

        <TouchableHighlight //line 13
            onPress={props.onPress}
            style={styles.container}
            underlayColor='rgba(255,255,255,.3)'
            hitSlop={{
                left: 5,
                top: 5,
                bottom: 5,
                right: 5
            }}
        >
            {
                props.isPaused ? <Icon size={20} color="#98ca3f" name={
                    Platform.OS === 'ios' ? 'ios-play' : 'md-play'
                  } /> : <Icon size={20} color="#98ca3f" name={
                    Platform.OS === 'ios' ? 'ios-pause' : 'md-pause'} />
            }
        </TouchableHighlight>
    )
}

export default PlayPause

【问题讨论】：

您确定没有默认导出Header 吗？（看起来和你的其他组件一样）
是的，我也将Header 导出为默认值。但是错误不存在，我实际上可以从标题导入中删除{ }
至少有一个导入错误。也许您忘记了deault 或不小心添加了{}，即使它不是默认导出？
好吧，如果它是default 导出，那么您应该将其作为default 导入：import Header from './src/sections/components/header'
@messerbill 我刚刚仔细检查过，我在那里导入的每个组件都有导出默认 myClass

标签： javascript reactjs react-native expo

【解决方案1】：

@expo/vector-icons 不默认导出ICON。

@expo/vector-icons 默认使用Ionicons。

about @expo/vector-icons

例子

import { Ionicons } from '@expo/vector-icons';
...
  {
                props.isPaused ? <Ionicons size={20} color="#98ca3f" name={
                    Platform.OS === 'ios' ? 'ios-play' : 'md-play'
                  } /> : <Ionicons size={20} color="#98ca3f" name={
                    Platform.OS === 'ios' ? 'ios-pause' : 'md-pause'} />
            }

ICON 是 react-native-vector-icons

的道具

import Icon from 'react-native-vector-icons/dist/FontAwesome';

【讨论】：