问题
Following on from my last question Switch Navigator and Tab Navigator Conflict the previous error was fixed. Now I encouter a new error - I navigate to page VenueDetail in my HomeNavigator then switch from Favourites to Dashboard in my tab navigator for this error to be thrown TypeError: subs is not a function. (In 'subs(payloadWithType)', 'subs' is an instance of Array)
any ideas?
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
},
headerTitleStyle: {
fontFamily: "roboto-regular"
},
headerTintColor: "white"
};
//Main Stack
const HomeNavigator = createStackNavigator(
{
DashboardHome: 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(
{
DashboardTab: {
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,
DashboardMain: MainNavigator, //User
});
export default createAppContainer(MainAuthNavigator);
来源:https://stackoverflow.com/questions/58945255/switch-navigator-and-tab-navigator-conflict-continued