Блог

Я создаю приложения react native, в которых мое приложение похоже на приложение marketplace. Мое приложение имеет навигацию по нижней вкладке в качестве корневой навигации с 5 вкладками, а пятая вкладка содержит SwitchNavigator для аутентификации, если пользователь успешно вошел в систему / зарегистрировался, затем переключится на profileStack и останется в loginStack, когда не войдет в систему. Когда я хочу установить видимость вкладки bottomTabNavigator на исчезновение, когда экранный стек profileStack> 0, это означает, что панель вкладок bottomTabNavigator видна только на главной странице профиля и не отображается на странице editprofile, но с SwitchNavigator внутри bottomTabNavigator панель вкладок продолжает появляться до тех пор, пока не откроется страница 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 initialRoute