javascript - 切换导航器和选项卡导航器冲突

Question

我刚刚实现了一个身份验证堆栈，并且我的 TabNavigator 出现问题 - 当我单击选项卡导航器中的第二个“收藏夹”选项卡并引用 MainNavigator 时> 在我的开关中，我收到消息 导航器中没有名为“Favourites”且带有“Dashboard”键的路线。必须是以下之一:“仪表板，管理员”。在我引入 switch navigator 并在我的 appContainer 中添加 MainNavigator 之前，它工作得非常好。有什么线索吗？

    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(
      {
        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);

Answer 1

尝试更改关键仪表板。你到处都用它(三次)!只需尝试 Dashboard1、Dashboard2 等

      const MainAuthNavigator = createSwitchNavigator({
                                                        Auth: AuthNavigator,
                                                   Dashboard2: MainNavigator,
                                                      });