错误:元素类型无效的React Native

Question

当我在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);

Answer 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';

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