如何解决错误:元素类型无效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';
还要检查其他默认导出的组件(如屏幕)!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。