React native 如何在react native with ex navigation中同时使用抽屉和选项卡导航

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

我搜索并尝试了自己，但我不能有一个抽屉和标签导航一起。前男友两者都有，但不在一起。它从抽屉导航开始，当我点击标签导航示例时，抽屉图标消失了

---

是否有人有一些如何完成此操作的提示/提示？

您是否尝试过将导航选项卡屏幕置于导航中

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
}));

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 >
    );
  }
} 

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

NavigationDrawer.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
}));

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 >
    );
  }
} 

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

import React，{Component}来自'React'；
进口{
StackNavigation，
抽屉的活力，
付款人授权项目，
}来自“@expo/ex-navigation”；
从“./Router”导入{Router}；
导出默认类NavigationDrawer扩展组件{
render（）{
返回(
renderTitle（'Home'，isSelected）}
renderIcon={isSelected=>renderIcon（'home'，isSelected）}
>
);
}
} 

NavigationTab.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
}));

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 >
    );
  }
} 

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

import React，{Component}来自'React'；
进口{
StackNavigation，
选项卡导航，
TabNavigationItem，
}来自“@expo/ex-navigation”；
从“./Router”导入{Router}；
导出默认类导航选项卡扩展组件{
render（）{
返回(
你好@prime你找到什么了吗？我在找同样的东西。没有，还没有。我最后只使用抽屉导航。好的，谢谢你的帮助。非常感谢@fadel