Нижние вкладки навигации React не работают с несколькими навигаторами стека

Question

Я столкнулся с проблемой при реализации нижней панели навигации. Вот мой код

import React from 'react';
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { fromLeft, fromBottom, fadeOut, fromRight } from 'react-navigation-transitions';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import constants from '../utilities/index';
import { Image, Dimensions } from 'react-native';
import { RFValue } from 'react-native-responsive-fontsize';

/***************************** Routes ***************************************/
import MainScreen from '../screens/MainScreen/MainScreen';
import AuthScreen from '../screens/Auth/AuthScreen'
import Login from '../screens/Auth/Login'
import Register from '../screens/Auth/Register'
import ForgorPasswordScreen from '../screens/Auth/ForgotPasswordScreen'
import PasswordSentScreen from '../screens/Auth/PasswordSentScreen'
import PapperScreen from '../screens/Papper/PapperScreen'
import SpecialitySearch from '../screens/Speciality/SpecialitySearch'
import SpecialityNotFound from '../screens/Speciality/SpecialityNotFound'
const { width, height } = Dimensions.get('window');

const tabBasedNavigation = createBottomTabNavigator({
  Home: {
    screen: PapperScreen, navigationOptions: {
      tabBarLabel: 'Home',
      tabBarIcon: ({ focused }) => {
        return (
          <Image source={focused ? constants.images.HomeActive : constants.images.HomeActiveInactive} />
        )
      }
    }
  },
  Booking: {
    screen: SpecialitySearch, navigationOptions: {
      tabBarLabel: 'Booking',
      tabBarIcon: ({ focused }) => {
        return (
          <Image source={focused ? constants.images.BookingActive : constants.images.BookingInactive} />
        )
      }
    }
  },
  Chat: {
    screen: PapperScreen, navigationOptions: {
      tabBarLabel: 'Chat',
      tabBarIcon: ({ focused }) => {
        return (
          <Image source={focused ? constants.images.ChatActive : constants.images.ChatInActive} />
        )
      }
    }
  },
  Account: {
    screen: SpecialitySearch, navigationOptions: {
      tabBarLabel: 'Account',
      tabBarIcon: ({ focused }) => {
        return (
          <Image source={focused ? constants.images.AccountActive : constants.images.AccountInActive} />
        )
      }
    }
  },
}, {
    tabBarOptions: {
      activeTintColor: constants.colors.dullYellow,
      labelStyle: {
        fontFamily: constants.fontFamily.HKGroteskRegular,
        fontSize: RFValue(12),
        marginBottom: height * 1 / 100
      },
      style: {
        height: height * 9 / 100,
      },
    }
  });

const BeforeLoginStack = createStackNavigator({
  MainScreen,
  AuthScreen,
  Login,
  Register,
  ForgorPasswordScreen,
  PasswordSentScreen,

}, {
    transitionConfig: (nav) => handleCustomTransition(nav),
    defaultNavigationOptions: {
      header: null,
    }
  });


const AfterLoginStack = createStackNavigator({
  homeTabs: tabBasedNavigation,
  PapperScreen,
  SpecialitySearch,
  SpecialityNotFound,

}, {
    transitionConfig: (nav) => handleCustomTransition(nav),
    defaultNavigationOptions: {
      header: null,
    }
  }); 


const MainNavigator = createSwitchNavigator({
  BeforeLoginStack,
  AfterLoginStack
});

const handleCustomTransition = ({ scenes }) => {
  const prevScene = scenes[scenes.length - 2];
  const nextScene = scenes[scenes.length - 1];

  // Custom transitions go there
  if (prevScene
    && prevScene.route.routeName === 'MainScreen'
    && nextScene.route.routeName === 'AuthScreen') {
    return fromBottom(500);
  } else if (prevScene
    && ( (prevScene.route.routeName === 'AuthScreen'
    && nextScene.route.routeName === 'ForgorPasswordScreen') || 
    (prevScene.route.routeName === 'ForgorPasswordScreen'
    && nextScene.route.routeName === 'PasswordSentScreen'))) {
    return fromRight(); 
  }
  return fadeOut();
}
export default createAppContainer(MainNavigator);

Проблема возникает, когда я использую несколько stackNavigator. Если я использую навигатор с одним стеком, то нижняя навигация работает. но когда я использую несколько навигаторов стека, нижняя навигация не отображается.

 const MainNavigator = createSwitchNavigator({
      AfterLoginStack
    });

Если я использую только AfterLoginStack, отображается нижняя панель навигации. но когда я размещаю два навигатора стека, как показано ниже, нижняя панель навигации не отображается.

const MainNavigator = createSwitchNavigator({
      BeforeLoginStack,
      AfterLoginStack
    });

Пожалуйста, предложите решение.

Answer 1

Ваш tabBasedNavigation помещается внутрь AfterLoginStack

И если вы создадите свой SwitchNavigator следующим образом:

const MainNavigator = createSwitchNavigator({
  BeforeLoginStack,
  AfterLoginStack
});

, начальный маршрут вашего SwitchNavigator будет BeforeLoginStack, поэтому BottomTab внутри AfterLoginStack не будет виден, когда BeforeLoginStack находится на экране.

Вы должны изменить на это:

const MainNavigator = createSwitchNavigator({
    BeforeLoginStack,
    AfterLoginStack
}, {
    initialRouteName: 'AfterLoginStack'
});