React-Navigation добавление навигации по ящикам с вкладкой

Question

Я использую реагирующую навигацию ("^ 3.0.9") с выставкой.

Это мой логический поток:

TabView(BottomTabNavigator) with StackNavigatior:

HomeStack
 --HomeScreen
 ...
LinksStack
 --LinkScreen
 ...
SettingsStack
-- Aboutscreen
...

Все работает нормально, но теперь я быхотел бы добавить навигацию по ящикам (меню гамбургера) следующим образом:

DrawerNavigation View
  --HomeScreen(which will show HomeScreen with 3 tabs)
  --Screen2 (no tabs)
  --Screen3 (no tabs)

Что я пытался сделать следующим образом:

export const Tab = createBottomTabNavigator({
  HomeStack,
  LinksStack,
  SettingsStack,
}
);

export const Drawer = DrawerNavigator({
  HomeScreen: { screen: HomeScreen },
  Screen2: { screen: Screen2 },
  Screen3: { screen: Screen3 },
});

, который они вернули ошибку undefined являетсяне функция

исходный код должен был экспортировать только навигатор нижней вкладки по умолчанию, например,

//export default createBottomTabNavigator({
//   HomeStack,
//   LinksStack,
//   SettingsStack,
// }
// );

Как реализовать оба BottomTabNavigator и DrawerNavigator вместе?

- код, указанный ниже

My App.js, который вызывает AppNavigator

render() {
    if (!this.state.isLoadingComplete && !this.props.skipLoadingScreen) {
      return (
        <AppLoading
          startAsync={this._loadResourcesAsync}
          onError={this._handleLoadingError}
          onFinish={this._handleFinishLoading}
        />
      );
    } else {
      return (
        <View style={styles.container}>
          {Platform.OS === 'ios' && <StatusBar barStyle="default" />}
          <AppNavigator />
        </View>
      );
    }
  }

, который AppNavigator вызывает MainTabNavigator

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

import MainTabNavigator from './MainTabNavigator';

export default createAppContainer(createSwitchNavigator({
  Main: MainTabNavigator,
}
)); 

примермой stackNavigator с вкладкой

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

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

Обновление: я правильно выполнил пример перекуса , в котором любой может ссылаться на.

Answer 1

Вам необходимо добавить tabNavigator внутри DrawerNavigator.

const ProfileNavigator = createDrawerNavigator({
  Drawer: DashboardTabNav
}, {
  initialRouteName: 'Drawer',
  contentComponent: ExampleScreen,
  drawerWidth: 300

});

// Manifest of possible screens
const PrimaryNav = createStackNavigator({
  DashboardScreen: { screen: ProfileNavigator },
  LoginScreen: { screen: LoginScreen },
  LaunchScreen: { screen: LaunchScreen },
  UpdateUserScreen: { screen: UpdateUserScreen }
}, {
  // Default config for all screens
  headerMode: 'none',
  initialRouteName: 'LoginScreen',
  navigationOptions: {
    headerStyle: styles.header
  }
});
export default createAppContainer(PrimaryNav);

Взгляните на как открыть ящик без перехода на экран с одной из вкладок tabnavigator? илиhttps://readybytes.in/blog/how-to-integrate-tabs-navigation-drawer-navigation-and-stack-navigation-together-in-react-navigation-v2 Также для полного примера взгляните на https://gitlab.com/readybytes/ReactNavigationExampleVersion2