react-native - 如何在 react-native 和 ex-navigation 中一起使用 Drawer 和 Tab 导航

Question

我正在 react-native 中构建一个应用程序并使用ex-navigation实现导航。我想使用 TabNav 来提供对最常用功能的快速访问，并将 DrawerNav 用于应该可用但不经常使用的功能。

我搜索并尝试了自己，但我不能同时拥有抽屉和标签导航。前导航示例应用程序两者兼而有之。它从抽屉导航开始，当我单击选项卡导航示例时，抽屉图标消失了。

有没有人有一些提示/提示如何完成这项工作？

Answer 1

您是否尝试过将导航选项卡屏幕放在导航中？

路由器.js

import React, { Component } from 'react';
import { createRouter } from '@expo/ex-navigation';
import NavigationDrawer from './NavigationDrawer';
import NavigationTab from './NavigationTab';

export const Router = createRouter(() => ({
  navigationDrawer : () => NavigationDrawer,
  navigationTab : () => NavigationTab
}));

NavigationDrawer.js

import React, { Component } from 'react';
import {
  StackNavigation,
  DrawerNavigation,
  DrawerNavigationItem,
} from '@expo/ex-navigation';
import { Router } from './Router';

export default class NavigationDrawer extends Component{
  render(){
    return(
      <DrawerNavigation
        drawerPosition="left"
        drawerWidth={300}
        initialItem="navigationTab" >
        <DrawerNavigationItem
          id="home"
          selectedStyle={{backgroundColor: '#E8E8E8',}}
          renderTitle={isSelected => renderTitle('Home', isSelected)}
          renderIcon={isSelected => renderIcon('home', isSelected)}
        >
          <StackNavigation
            id="navigationTab"
            initialRoute={Router.getRoute('navigationTab')}
            defaultRouteConfig={{
              navigationBar: {
                backgroundColor: '#0084FF',
                tintColor: '#fff',
                title: 'NavigationTab',
              },
            }}
          />
        </DrawerNavigationItem>
      </DrawerNavigation >
    );
  }
} 

NavigationTab.js

import React, { Component } from 'react';
import {
  StackNavigation,
  TabNavigation,
  TabNavigationItem,
} from '@expo/ex-navigation';
import { Router } from './Router';

export default class NavigationTab extends Component {
  render() {
    return (
      <TabNavigation
        initialTab="first"
        initialItem="first"
        <TabNavigationItem
          id="first"
          title="First"
        >
        {/*content*/}
        </TabNavigationItem>
        <TabNavigationItem
          id="second"
          title="Second"
        >
        {/*content*/}
        </TabNavigationItem>
        <TabNavigationItem
          id="third"
          title="Third"
        >
        {/*content*/}
        </TabNavigationItem>
      </TabNavigation>
    )
  }
}

使用这种方法，抽屉和标签导航可以一起使用，但是当你从抽屉菜单中选择一个项目（带有堆栈导航）时，带有标签的屏幕将被替换。

如果您希望该选项卡存在于抽屉菜单中的每个屏幕中，则需要在每个屏幕中添加该选项卡（我认为这应该是不必要的）。