Question

我刚刚实现了一个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
      },
      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,
                                                      });

开关导航器和选项卡导航器冲突

1 个答案: