错误：元素类型无效 React Native答案

【问题标题】：Error: Element type is invalid React Native错误：元素类型无效 React Native
【发布时间】：2021-01-08 10:00:42
【问题描述】：

当我在 android 上启动我的应用程序时，我收到以下错误：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

这是我的 Navigation.js

import React from 'react'
import { createStackNavigator } from 'react-navigation-stack'
import { Dimensions } from 'react-native'
import {createAppContainer, } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs'

import Home from '../screens/Home'
import AddCollege from '../screens/AddCollege'
import ViewCollege from '../screens/ViewCollege'
import ViewSchool from '../screens/ViewSchool'
import AddSchool from '../screens/AddSchool'
import Profile from '../screens/Profile'
import Dashboard from '../screens/Dashboard'
import Settings from '../screens/Settings'
import ManageProfile from '../screens/ManageProfile'

import { Ionicons } from "react-native-vector-icons";

const HEIGHT = Dimensions.get('window').height
const WIDTH = Dimensions.get('window').width

const HomeStack = createStackNavigator(
    {
      Home: Home,
      AddCollege: AddCollege,
      ViewCollege: ViewCollege,
      ViewSchool: ViewSchool,
      AddSchool: AddSchool,
      ManageProfile: ManageProfile
    },
    {
      defaultNavigationOptions: {
         headerStyle: {
          backgroundColor: 'black',
          height: HEIGHT / 9
        },
        headerTintColor: '#fff',
      },
    }
    );

    const ProfileStack = createStackNavigator(
      {
        Profile: Profile,
       
      },
      {
        defaultNavigationOptions: {
          headerTitleStyle: {
            textAlign: 'center',
          },
           headerStyle: {
            backgroundColor: 'black',
            height: HEIGHT / 9
            //marginTop: 24 ,
          },
          
          headerTintColor: '#fff',
          title: 'Profile', 
         
        },
      }
    );

    const DashboardStack = createStackNavigator(
      {
        Dashboard: Dashboard,   
      },
      {
        defaultNavigationOptions: {
          title: 'Dashboard',
          headerStyle: {
            backgroundColor: 'black',
            height: HEIGHT / 9
          },
          headerTintColor: '#fff',
         
        },
      }
    );

    const SettingsStack = createStackNavigator(
      {
        Settings: Settings,
      },
      {
        defaultNavigationOptions: {
        title: 'Settings ',
          headerStyle: {
            backgroundColor: 'black',
            height:HEIGHT / 9
          },
          headerTitleStyle: {
                color: '#fff',
            },    
        },
      },
    );


const MainApp = createBottomTabNavigator({
    Home: {
      screen: HomeStack ,
      navigationOptions: {
            tabBarLabel: 'Home', 
            tabBarIcon: ({ tintColor }) => (
                <Ionicons name="md-home" color={tintColor} size={30} />
            )
          }
        }, 
    Profile: {
      screen: ProfileStack,
      navigationOptions: {
            tabBarLabel: 'Profile', 
            tabBarIcon: ({ tintColor }) => (
                <Ionicons name="md-user" color={tintColor} size={30} />
            )
          }
        }, 
    Dashboard: { 
      screen: DashboardStack,
       navigationOptions: {
            tabBarLabel: 'Dashboard', 
            tabBarIcon: ({ tintColor }) => (
                <Ionicons name="md-clipboard" color={tintColor} size={30} />
            )
          }
        } ,
    Settings: {
      screen : SettingsStack ,
       navigationOptions: {
            tabBarLabel: 'Settings', 
            tabBarIcon: ({ tintColor }) => (
                <Ionicons name="md-settings" color={tintColor} size={30} />
            )
        }
      }
  },
  {
    tabBarOptions: {
      labelStyle: {
     fontSize: 12,
     padding: 0,
      margin: 0
  },
        activeTintColor: 'red', 
        inactiveTintColor: 'white',
        style:{height: HEIGHT / 10,  backgroundColor: 'black' },
        showIcon: true,
        padding: 0,
        margin: 0
    }
  });

  export default createAppContainer(MainApp);

【问题讨论】：

请告诉我们这个错误所指的组件。它一定是在告诉类似“请检查 .... 的渲染方法”
查看TabBarIcon的渲染方法。
试试import Ionicons from "react-native-vector-icons/Ionicons";

标签： reactjs react-native react-navigation react-navigation-bottom-tab react-native-tabnavigator

【解决方案1】：

这是因为从react-native-vector-icons 导入错误你应该这样做

import Ionicons from "react-native-vector-icons/Ionicons";

或其他字体

import FontAwesome from 'react-native-vector-icons/FontAwesome';
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';

还要检查默认导出的其他组件（例如屏幕）！

【讨论】：