切换导航器和选项卡导航器冲突继续

时间:2019-11-20 01:19:49

标签: reactjs react-native react-navigation tabnavigator

从上一个问题Switch Navigator and Tab Navigator Conflict开始,先前的错误已修复。现在,我遇到一个新错误-我导航到HomeNavigator中的VenueDetail页面,然后在选项卡导航器中从“收藏夹”切换到“仪表板”,以引发此错误TypeError: subs is not a function. (In 'subs(payloadWithType)', 'subs' is an instance of Array)任何想法?

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

0 个答案:

没有答案
相关问题