错误：元素类型无效React Native

问题描述

当我在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,title: 'Profile',}
    );

    const DashboardStack = createStackNavigator(
      {
        Dashboard: Dashboard,{
        defaultNavigationoptions: {
          title: 'Dashboard',height: HEIGHT / 9
          },}
    );

    const Settingsstack = createStackNavigator(
      {
        Settings: Settings,{
        defaultNavigationoptions: {
        title: 'Settings ',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,margin: 0
    }
  });

  export default createAppContainer(MainApp);

解决方法

这是由于从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';

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