Как отобразить навигацию по Tab одновременно с навигацией по ящику в Reaction-Navigation v5

Question

Я хочу визуализировать компоненты приложения навигации по ящикам и вкладкам одновременно в моем приложении.

Я создал файл с именем root.js и записал оба компонента в этом файле:

import React, {Fragment} from 'react';

import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import { Login, SecondPage, ThirdPage } from './components/index';

const Tab = createBottomTabNavigator();
const Drawer = createDrawerNavigator();

И это компонент:

const MainDrawer = () => {

  return (

    <Fragment>
    <NavigationContainer >

      <Drawer.Navigator>
        <Drawer.Screen name="Login" component={Login} />
        <Drawer.Screen name="Second Page" component={SecondPage} />
        <Drawer.Screen name="Third Page" component={ThirdPage} />
      </Drawer.Navigator>
    </NavigationContainer>

<NavigationContainer>
      <Tab.Navigator>
      <Tab.Screen name="Login" component={Login} />
        <Tab.Screen name="Settings" component={SecondPage} />
        <Tab.Screen name="Third Page" component={ThirdPage} />
      </Tab.Navigator>
    </NavigationContainer>


    </Fragment>

  )

export default MainDrawer;

Но компоненты дублируются, как вы можете видеть на следующем снимке экрана. Как я могу объединить эти два компонента и отобразить их как один компонент?

Answer 1

Используйте один NavigationContainer. Поставьте ваш Tab.Navigator в качестве первого экрана.

const LoginWithTabs = () => {
  const Tab = createBottomTabNavigator()
  return (
    <Tab.Navigator>
      <Tab.Screen name="Login" component={Login} />
      <Tab.Screen name="Settings" component={SecondPage} />
      <Tab.Screen name="Third Page" component={ThirdPage} />
    </Tab.Navigator>
  )
}

const MainDrawer = () => {

  return (
    <NavigationContainer >
      <Drawer.Navigator>
        <Drawer.Screen name="LoginWithTabs" component={LoginWithTabs} />
        <Drawer.Screen name="Second Page" component={SecondPage} />
        <Drawer.Screen name="Third Page" component={ThirdPage} />
      </Drawer.Navigator>
    </NavigationContainer>
  )

export default MainDrawer;

Обратите внимание, что ваш ящик будет содержать 3 записи, и если вы выберете «Вторая страница», вы будете перенаправлены на SecondPage, и вы не будете см. вкладки. Если вы хотите более сложное поведение, вам нужно создать пользовательский компонент, который заменит компонент по умолчанию для Drawer.