React Native - несколько навигаторов (ящик и нижняя вкладка на одной странице)?

Question

AppNavigator.js

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

import MainTabNavigator from './MainTabNavigator';
import AuthLoadingScreen from '../screens/AuthLoadingScreen'
import Login from '../screens/Login';
import SideBarNavigator from './SideBarNavigator'


export default createSwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen ,
    App: MainTabNavigator,
    Auth: Login,
  },
  {
    initialRouteName: 'AuthLoading',
  }
);

MainTabNavigator.js

    import React from 'react';
import { Platform } from 'react-native';
import { createStackNavigator,createDrawerNavigator, createBottomTabNavigator } from 'react-navigation';

import TabBarIcon from '../components/TabBarIcon';
import HomeScreen from '../screens/HomeScreen';
import LinksScreen from '../screens/LinksScreen';
import SettingsScreen from '../screens/SettingsScreen';
import SideBarNavigator from './SideBarNavigator';

const HomeStack = createStackNavigator({
  Home: HomeScreen,
});

HomeStack.navigationOptions = {
  tabBarLabel: 'Home',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={
        Platform.OS === 'ios'
          ? `ios-information-circle${focused ? '' : '-outline'}`
          : 'md-information-circle'
      }
    />
  ),
};

const LinksStack = createStackNavigator({
  Links: LinksScreen,
});

LinksStack.navigationOptions = {
  tabBarLabel: 'Links',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? 'ios-link' : 'md-link'}
    />
  ),
};

const SettingsStack = createStackNavigator({
  Settings: SettingsScreen,
});


SettingsStack.navigationOptions = {
  tabBarLabel: 'Settings',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'}
    />
  ),
};



export default createBottomTabNavigator({
  HomeStack,
  LinksStack,
  SettingsStack,
}

);

SideBarNavigator.js

import React from 'react';
import { Platform } from 'react-native';
import { createStackNavigator,createDrawerNavigator, createBottomTabNavigator } from 'react-navigation';

import TabBarIcon from '../components/TabBarIcon';
import HomeScreen from '../screens/HomeScreen';
import LinksScreen from '../screens/LinksScreen';
import SettingsScreen from '../screens/SettingsScreen';

const HomeStacks = createStackNavigator({
  Home: HomeScreen,
});

HomeStacks.navigationOptions = {
  tabBarLabel: 'Home',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={
        Platform.OS === 'ios'
          ? `ios-information-circle${focused ? '' : '-outline'}`
          : 'md-information-circle'
      }
    />
  ),
};

const LinksStacks = createStackNavigator({
  Links: LinksScreen,
});

LinksStacks.navigationOptions = {
  tabBarLabel: 'Links',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? 'ios-link' : 'md-link'}
    />
  ),
};

const SettingsStacks = createStackNavigator({
  Settings: SettingsScreen,
});


SettingsStacks.navigationOptions = {
  tabBarLabel: 'Settings',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'}
    />
  ),
};



export default createDrawerNavigator({
  HomeStacks,
  LinksStacks,
  SettingsStacks,
});

Что я хочуДля этого нужно, чтобы Drawer (SideBar.js) и TabNav (MainNav.js) находились на одной странице.

Так что это будет выглядеть как GoogleMaps на Android, на начальной странице.Где вы можете получить доступ как к боковой панели ящика, так и к нижним трем ссылкам.

Как мне добиться чего-то подобного?

Я пытался возиться с MainTabNavigator, но у меня ничего не получается.

Answer 1

Держите ваш Навигатор ящиков как MainNavigator в вашем SwitchNavigator и оберните TabNavigator внутри MainNavigator как initialRoute, и у вас есть специальный компонент для вашего ящика, если вы не хотите показывать Дом каккликабельная ссылка для ваших вкладок внутри ящика.

Код должен выглядеть следующим образом:

export default createSwitchNavigator({
   AuthLoading: AuthLoadingScreen ,
   App: MainNavigator,
   Auth: Login,
}, {
  initialRouteName: 'AuthLoading',
});

Ваш MainNavigator должен быть выдвижным ящиком, если вы хотите пригласить своего пользователя навкладки с выдвижным ящиком вместе с ними.

const MainNavigator = createDrawerNavigator({
   Home: { screen: MyTabs},
   Notifications: { screen: MyNotificationsScreen }
}, {
   contentComponent: props =>  <MyCoolCustomDrawerComponent {...props} /> //optional
});

и, наконец, MyTabs должен быть вашим TabNavigator.

Таким образом, вы можете достичь того, что вы хотите.

Примечание. Чтобы вложить навигаторы таким образом, объявите и определите ваш TabNavigator перед DrawerNavigator и DrawerNavigator перед SwitchNavigator.

Надеюсь, это поможет.Happy Coding:)