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

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;

但是正如您在以下屏幕截图中看到的那样，组件被重复了，我如何合并这两个组件并将它们呈现为一个组件？

标签： reactjsreact-nativenavigation-drawerreact-navigationtabnavigator

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并且您不会看到选项卡。如果您想要更复杂的行为，您需要创建一个自定义组件来替换抽屉的默认组件。