Какова правильная последовательность навигации?потому что табуляция не может исчезнуть, когда коммутатор содержит стек, а коммутатор является потомком bottomtabnavigator - PullRequest
1 голос
/ 16 апреля 2019

Я заставляю реагировать нативные приложения, где мое приложение похоже на рыночное приложение.Мое приложение имеет навигацию по нижней вкладке как корневую навигацию с 5 вкладками, а пятая вкладка содержит switchNavigator для аутентификации, если пользователь успешно вошел в систему / зарегистрируется, затем переключится на profileStack и останется в loginStack, когда не вошел в систему. Когда я хочуустановите, чтобы видимость tabTat bottomTabNavigator исчезала, когда стек экрана profileStack> 0, это означает, что tabT bottomTabNavigator виден только на главной странице профиля и не отображается на странице editprofile, но с switchNavigator внутри bottomTabNavigator панель вкладок продолжаетпоявляются до страницы editprofile

мое приложение, использующее версию lib: "реагировать": "16.6.3", "реагировать-нативно": "0.58.6", "реагировать-навигация": "^ 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 отображаются только на странице профиля и входа в систему InitialRoute

...