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

Question

Here is my component, I exported Home in my Home component at the end of the file. The code worked just fine in React Native but I'm currently porting it to expo and it stopped working. I have read also it has something to do with the imports but I don't have that many.

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>
    )
  }
}

I'm getting this error

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)

Am I importing something wrong?

Home is just a wrapper

import React, {Component} from 'react';

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

export default Home;

The error was actually in the player, where I had a bad import but then it says that I got the same error but for my playPause component. In line 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

Answer 1

@expo/vector-icons does not default export ICON .

@expo/vector-icons uses Ionicons by default.

about @expo/vector-icons

example

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 is the prop of react-native-vector-icons

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