对createBottomTabNavigator上的特定选项卡进行身份验证

Question

如何对createBottomTabNavigator上的特定选项卡进行身份验证的最佳实践，例如我正在使用createSwitchNavigator来配置文件选项卡，请检查以下我的导航器代码：

import Drawer from "./components/Drawer";
import Homepage from "./screen/Homepage";
import AuthLoading from "./screen/AuthLoading";
import ProfileLoading from "./screen/ProfileLoading";
import Login from "./screen/Member/Login";
import Signup from "./screen/Member/SignUp";
import Profile from "./screen/Member/Profile";

//Icon
import DitokoIcon from "./components/DitokoIcon";
import ditokoImg from "./assets/icon/ditoko.png";
import orderImg from "./assets/icon/order.png";
import cartImg from "./assets/icon/cart.png";
import chatImg from "./assets/icon/chat.png";
import accountImg from "./assets/icon/account.png";



const AuthStack = createStackNavigator(
  {
    Login,
    Signup
  },
  {
    initialRouteName: "Login"
  }
);

const ProfileStack = createStackNavigator(
  {
    Profile,
    Wishlist: WishListStack,
    Lastseen,
    Settings: SettingStack,
    Bank: BankStack,
    Address: AddressStack,
    Commission: CommissionStack,
    Shared: SharedStack,
    Contact
  },
  {
    initialRouteName: "Profile",
    headerMode: "none"
  }
);

ProfileStack.navigationOptions = ({ navigation }) => {
  let tabBarVisible = true;
  if (navigation.state.index > 0) {
    tabBarVisible = false;
  }

  return {
    tabBarVisible
  };
};

const ProfileCheckAuth = createSwitchNavigator(
  {
    AppLoading: ProfileLoading,
    AppProfile: ProfileStack,
    AppAuth: AuthStack
  },
  {
    initialRouteName: "AppLoading"
  }
);

ProfileCheckAuth.navigationOptions = ({ navigation }) => {
  if (navigation.state.index === 2) {
    return {
      tabBarVisible: false
    };
  }
};


const TabNav = createBottomTabNavigator(
  {
    Home: HomeStack,
    Orders: OrderStack,
    Cart: CartStack,
    Profile: ProfileCheckAuth
  },
  {
    defaultNavigationOptions: ({ navigation }) => {
      const { routeName } = navigation.state;
      let iconImg;
      if (routeName === "Home") {
        iconImg = ditokoImg;
      } else if (routeName === "Orders") {
        iconImg = orderImg;
      } else if (routeName === "Cart") {
        iconImg = cartImg;
      } else if (routeName === "Profile") {
        iconImg = profileImg;
      }
      return {
        tabBarIcon: () => (
            <Icon
              name={iconImg}
              width={widthPercentageToDP("7%")}
              height={widthPercentageToDP("7%")}
            />
        ),
        tabBarOptions: {
          activeTintColor: "#ff4500",
          style: {
            height: 55
          }
        }
      };
    },
    backBehavior: "history"
  }
);

const DrawerNav = createDrawerNavigator(
  {
    TabNav,
    Checkout
  },
  {
    contentComponent: props => <Drawer props={props} />,
    overlayColor: "rgba(0, 0, 0, 0.7)"
  }
);

const App = createStackNavigator({ DrawerNav }, { headerMode: "none" });
const Auth = createStackNavigator({ AuthStack }, { headerMode: "none" });

const NavCheckAuth = createSwitchNavigator(
  {
    AuthLoading,
    Auth,
    App
  },
  {
    initialRouteName: "App"
  }
);

const NavigatorApp = createAppContainer(NavCheckAuth);

每次用户单击“个人资料”选项卡时，都会检查它，看起来很奇怪，但是如果没有最佳实践，也可以，当我想使用tabBarVisible隐藏选项卡时出现问题：false，完全无效，但是当我将ProfileCheckAuth更改为TabNav上的ProfileStack，就可以了。