javascript - 正确的导航顺序是什么？因为当开关包含堆栈时选项卡栏不会消失，并且开关是bottomtabnavigator的子级

Question

我正在制作反应原生应用程序，我的应用程序就像一个市场应用程序。我的应用程序将底部选项卡导航作为带有 5 个选项卡的根导航，第五个选项卡包含一个 switchNavigator 来验证用户是否已成功登录/注册，然后将切换到 profileStack 并在未登录时留在 loginStack。当我想设置bottomTabNavigator tabbat可见性在profileStack > 0的屏幕堆栈时消失，表示tabbar bottomTabNavigator仅在主profile页面可见，不出现在editprofile页面，但在bottomTabNavigator里面有switchNavigator，tabbar继续出现直到editprofile页面

我的应用程序使用 lib 版本：“react”：“16.6.3”，“react-native”：“0.58.6”，“react-navigation”：“^3.3.2”

import {createStackNavigator, createMaterialTopTabNavigator, createBottomTabNavigator, createSwitchNavigator, createAppContainer} from 'react-navigation';

const LoginStack = createStackNavigator({
    LogIn :{screen: LogIn, navigationOptions: ({ navigation }) => ({header: null}) },
    Register :{screen: Register, navigationOptions: ({ navigation }) => ({header: null}) },
    RegisterPassword :{screen: RegisterPassword, navigationOptions: ({ navigation }) => ({header: null}) }
},{
    initialRouteName: 'LogIn'
})

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

    return {
      tabBarVisible,
    };
};

const ProfileStack = createStackNavigator({
    Profile :{screen: Profile, navigationOptions: ({ navigation }) => ({header: null}) },
    MyPoint :{screen: MyPoint, navigationOptions: ({ navigation }) => ({header: null}) },
    EditProfileMenu :{screen: EditProfileMenu, navigationOptions: ({ navigation }) => ({header: null}) },
    EditProfile :{screen: EditProfile, navigationOptions: ({ navigation }) => ({header: null}) },
    ProfileAddress :{screen: ProfileAddress, navigationOptions: ({ navigation }) => ({header: null}) }
},{
    initialRouteName: 'Profile'
})

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

    return {
      tabBarVisible,
    };
};

const AuthSwitch = createSwitchNavigator({
    AuthChecker: { screen: AuthChecker, 
        navigationOptions: ({ navigation }) => ({title: 'AuthChecker'}) },
    LoginStack: { screen: LoginStack},
    ProfileStack: { screen: ProfileStack}
},{
    initialRouteName: 'AuthChecker'
})

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

    return {
      tabBarVisible,
    };
};

const AppNavigator = createBottomTabNavigator({
    Home :{screen: HomeStack,
        navigationOptions:{
            tabBarLabel: "Home",
            tabBarIcon: ({ focused }) => (
                // <Ionicons name="ios-home" color={tintColor} size={24} />
                focused ?
                <Image source={require('../assets/images/nav/home_active.png')} style={{width:23, height:23}} />
                : <Image source={require('../assets/images/nav/home.png')} style={{width:23, height:23}} />
            )
        }},
    FastShop :{screen: FastShopStack,
        navigationOptions:{
            tabBarLabel: "Fast Shop",
            tabBarIcon: ({focused}) => (
                // <Ionicons name="ios-cart" color={tintColor} size={24} />
                focused ?
                <Image source={require('../assets/images/nav/fast_shop_active.png')} style={{width:23, height:23}} />
                : <Image source={require('../assets/images/nav/fast_shop.png')} style={{width:23, height:23}} />
            )
        }},
    MyOrder :{screen: MyOrderStack,
        navigationOptions:{
            tabBarLabel: "My Order",
            tabBarIcon: ({focused}) => (
                // <Ionicons name="ios-list-box" color={tintColor} size={24} />
                focused ?
                <Image source={require('../assets/images/nav/myorder_active.png')} style={{width:23, height:23}} />
                : <Image source={require('../assets/images/nav/myorder.png')} style={{width:23, height:23}} />
            )
        }},
    Inbox :{screen: Inbox,
        navigationOptions:{
            tabBarLabel: "Inbox",
            tabBarIcon: ({focused}) => (
                // <Ionicons name="ios-chatbubbles" color={tintColor} size={24} />
                focused ?
                <Image source={require('../assets/images/nav/inbox_active.png')} style={{width:28, height:23}} />
                : <Image source={require('../assets/images/nav/inbox.png')} style={{width:28, height:23}} />
            )
        }},
    Account :{screen: AuthSwitch,
        navigationOptions:{
            tabBarLabel: "Account",
            tabBarIcon: ({focused}) => (
                // <Ionicons name="ios-contact" color={tintColor} size={24} />
                focused ?
                <Image source={require('../assets/images/nav/akun_active.png')} style={{width:23, height:23}} />
                : <Image source={require('../assets/images/nav/akun.png')} style={{width:23, height:23}} />
            )
        }},
    },{
        initialRouteName: 'Home',
        tabBarOptions: {
            style: {
             backgroundColor: '#FFF',
             height:50
            },
            activeTintColor: '#2EB499',
            inactiveTintColor: 'gray',
            labelStyle: {
                fontSize: 10,
              },
          }
    }
);

const App = createAppContainer(AppNavigator);

export default App;

我希望 profileStack 和 loginStack 的标签栏只出现在 Profile 和 Login 初始路由页面上

标签： javascriptreact-nativeauthenticationreact-navigation