如何在 react-navigation v5 中同时渲染 Tab 导航和 Drawer 导航

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 个条目，如果您 select "Second Page"，您将被重定向到 SecondPage，您将看不到选项卡。如果你想要更复杂的行为，你需要创建一个自定义组件来替换抽屉的默认组件。

如何在 react-navigation v5 中同时渲染 Tab 导航和 Drawer 导航

How to render Tab navigation with Drawer navigation simultaneously in react-navigation v5

tabnavigator

navigation-drawer

reactjs

react-native

react-navigation