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

Question

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

我自己搜索并尝试过，但我无法同时使用抽屉和标签导航。 ex-navigation example app 两者都有但不在一起。它从抽屉导航开始，当我点击 Tab 导航示例时，抽屉图标消失了。

有人知道tips/hints如何完成这个吗？

Answer 1

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

Router.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>
    )
  }
}

通过这种方法，抽屉和选项卡导航可以一起使用，但是当您 select 抽屉菜单中的项目（使用堆栈导航）时，带有选项卡的屏幕将被替换。

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

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

How to use the Drawer and Tab navigation together in react-native with ex-navigation

react-native

navigation

expo

ex-navigation