Question

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

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

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

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

使用此方法，可以同时使用抽屉和标签导航，但是当您从抽屉菜单中选择项目（使用堆栈导航）时，将替换带有标签的屏幕。

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

如何使用抽屉和选项卡导航一起使用ex-navigation反应原生

1 个答案: