Как визуализировать навигацию по вкладкам одновременно с навигацией по ящику в react-navigation v5

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

Я создал файл с именем 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;

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

введите здесь описание изображения


react-native reactjs navigation-drawer react-navigation tabnavigator
person roz333    schedule 07.02.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Используйте один 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.

person MBach    schedule 07.02.2020
comment
Спасибо за вашу помощь, я изменил свой код на то, что вы сказали, но это не сработало, дублирование исчезло, но вкладка также не отображается. Вы не забыли экспортировать первую функцию? LoginWithTabs - person roz333; 08.02.2020
comment
Извини, приятель, это сработало, я забыл импортировать LoginWithTabs в Drawer.Navigator, ты сэкономил мне время, я очень ценю это. - person roz333; 08.02.2020
comment
Мне нужны вкладки на всех экранах, я уже создал пользовательский компонент для Drawer. Пожалуйста, взгляните на этот снимок экрана imgur.com/a/5LhsSzk. Затем импортируйте его в Drawer по умолчанию, но Tab по-прежнему не отображается на всех экранах, мне нужна вкладка на всех экранах. У вас есть идеи, как я могу это исправить? - person roz333; 08.02.2020
comment
Я исправил это, приятель, еще раз спасибо за вашу помощь - person roz333; 08.02.2020
comment
@roz333 - Как ты сделал вкладки со всеми экранами? Я хочу показывать вкладки и навигацию на всех экранах. Не могли бы вы мне помочь? - person Raju Singh; 27.02.2020
comment
@RajuRajpurohit, приятель, вы должны сделать навигацию по вкладкам, а затем импортировать ее в навигацию по стеку. - person roz333; 28.02.2020
comment
@ roz333 - я создал навигатор вкладок и навигатор ящиков с пользовательскими компонентами. Я хочу получить текущий активный маршрут. Но из-за дочернего маршрута это создает проблему. Есть ли у вас какие-либо идеи для получения активного маршрута (в настоящее время активный экран)? - person Raju Singh; 16.03.2020
comment
Привет @ roz333 Как вы одновременно отображали вкладки и ящик, не могли бы вы поделиться примером. Я хочу показывать вкладки на всех экранах, выбранных в меню ящика, но не могу этого сделать. - person coffee; 30.01.2021