我刚刚实现了一个Auth堆栈,而我的TabNavigator
遇到了问题-当我单击标签导航器中的第二个“收藏夹”标签,并在开关中引用了MainNavigator
时,消息There is no route named 'Favourites' in the navigator with the key 'Dashboard. Must be one of: 'Dashboard,Admin'
。在我引入开关导航器并将MainNavigator
放入我的appContainer中之前,这一切工作得很好。有什么线索吗?
import React from "react";
import { Platform,Text } from "react-native";
import { createAppContainer,createSwitchNavigator} from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import { createDrawerNavigator } from "react-navigation-drawer";
import { createBottomTabNavigator } from "react-navigation-tabs";
import { createMaterialBottomTabNavigator } from "react-navigation-material-bottom-tabs";
//Components
import DashboardScreen from "../screens/DashboardScreen";
import MapScreen from "../screens/MapScreen";
import VenueOverviewScreen from "../screens/VenueOverviewScreen";
import VenueDetailScreen from "../screens/VenueDetailScreen";
import QRCodeScanScreen from "../screens/QRCodeScanScreen";
import FavouritesScreen from "../screens/FavouritesScreen";
import AdminVenueScreen from "../screens/admin/AdminVenueScreen";
import AdminUserListScreen from "../screens/admin/AdminUserListScreen";
import AdminUserDetailScreen from "../screens/admin/AdminUserDetailScreen";
import AuthScreen from "../screens/auth/AuthScreen";
//Misc
import Colors from "../constants/Colors";
import { Ionicons } from "@expo/vector-icons";
//Default Nav
const defaultNavOptions = {
headerStyle: {
backgroundColor: Colors.brownPrimaryDark
},headerTitleStyle: {
fontFamily: "roboto-regular"
},headerTintColor: "white"
};
//Default Admin
const defaultAdminNavOptions = {
headerStyle: {
backgroundColor: Colors.greenPrimary
},headerTintColor: "white"
};
//Main Stack
const HomeNavigator = createStackNavigator(
{
Dashboard: DashboardScreen,Map: MapScreen,Venues: VenueOverviewScreen,VenueDetail: VenueDetailScreen,},{
defaultNavigationOptions: defaultNavOptions
}
);
//Fav Stack
const FavNavigator = createStackNavigator(
{
Favourites: FavouritesScreen
},{
defaultNavigationOptions: defaultNavOptions
}
);
//AdminStack
const AdminNavigator = createStackNavigator(
{
Admin: AdminVenueScreen,AdminUserList: AdminUserListScreen,AdminUserDetail: AdminUserDetailScreen,QRCodeScan: QRCodeScanScreen
},{
defaultNavigationOptions: defaultAdminNavOptions
}
);
//Tab Config
const tabScreenconfig = {
Home: {
screen: HomeNavigator,navigationOptions: {
tabBarLabel:
Platform.OS === "android" ? (
<Text style={{ fontFamily: "roboto-regular" }}>Dashboard</Text>
) : (
"Dashboard"
),tabBarIcon: tabInfo => {
return <Ionicons name="ios-home" size={23} color={tabInfo.tintColor} />;
},//tabBarColor: Colors.greyDark,//only shifting effect
}
},Favourites: {
screen: FavNavigator,navigationOptions: {
tabBarLabel:
Platform.OS === "android" ? (
<Text style={{ fontFamily: "roboto-regular" }}>Favourties</Text>
) : (
"Favourties"
),tabBarIcon: tabInfo => {
return <Ionicons name="ios-star" size={23} color={tabInfo.tintColor} />;
},//tabBarColor: Colors.greenPrimary //only shifting effect onPress
}
}
};
const TabNavigator =
Platform.OS === "android"
? createMaterialBottomTabNavigator(tabScreenconfig,{
activeTintColor: Colors.brownSecondaryLight,shifting: true,barStyle: { backgroundColor: '#eee' },activeColor: Colors.greyDarker,inactiveColor:'#ccc',})
: createBottomTabNavigator(tabScreenconfig,{
tabBarOptions: {
labelStyle: {
fontFamily: "roboto-regular",fontSize: 15
},activeTintColor: Colors.greenPrimary,}
});
const MainNavigator = createDrawerNavigator(
{
Dashboard: {
screen: TabNavigator,navigationOptions: {
drawerLabel: "Dashboard",drawerIcon: drawerConfig => (
<Ionicons
name="ios-home"
size={23}
color={drawerConfig.tintColor}
/>
)
}
},Admin: {
screen: AdminNavigator,navigationOptions: {
drawerLabel: "Admin",drawerIcon: drawerConfig => (
<Ionicons
name="ios-lock"
size={23}
color={drawerConfig.tintColor}
/>
)
}
}
},{
contentOptions: {
activeTintColor: Colors.greenPrimary,itemsContainerStyle: {
marginVertical: 0
},iconContainerStyle: {
opacity: 1
}
},drawerPosition: "right",}
);
const AuthNavigator = createStackNavigator(
{
Auth: AuthScreen
},{
headerMode: "none",navigationOptions: {
headerVisible: false
}
}
);
const MainAuthNavigator = createSwitchNavigator({
Auth: AuthNavigator,Dashboard: MainNavigator,//User
});
export default createAppContainer(MainAuthNavigator);