如何实现带有底部选项卡的抽屉式导航,但没有两个嵌套导航器?

问题描述 投票:0回答:1

我正在尝试实现一个界面(在react-native - expo应用程序中),其中有一个主要导航器 - 抽屉。但仅出于用户界面的原因,我还想要一个带有选项卡的底部栏,看起来像来自react-navigation的底部选项卡导航器。

重要的是 - 我不想要嵌套的导航器,因为一次只有一条主要路线 - 我希望它由单个导航器(抽屉式导航器)管理。

底部选项卡只能在抽屉式导航器的屏幕之间切换。无论当前路线如何,所有屏幕始终可用。如果我将选项卡导航嵌套在抽屉导航中 - 那么我将不得不乘以所有屏幕,因为选项卡只会导致抽屉中已有的相同屏幕。

我怎样才能实现这个目标?也许有一些类似的组件(在 UI 中),但不是来自反应导航(仅用于在抽屉屏幕之间切换)?

react-native expo react-navigation
1个回答
0
投票

好吧,经过长时间的研究,我发现react-navigation包不提供这样的功能,而不需要嵌套导航器(并承担其后果)。 对于处理此问题的其他人 - 我只是实现了自己的底部按钮栏并放置该组件,使其始终可见。

三件重要的事情:

  1. 它必须放在 NavigationContainer 内部但在(抽屉)导航器外部,以便它始终可见。

  2. 为了能够在导航器外部获取导航对象(并能够在屏幕之间切换),您可以在底部选项卡组件中使用“useNavigation”挂钩。

  3. 为了能够从底部选项卡打开抽屉,您必须使用特殊对象 - DrawerActions。

    从“@react-navigation/native”导入{useNavigation,ParamListBase,DrawerActions};

    //组件内部: const 导航 = useNavigation(); //... 导航.dispatch(DrawerActions.openDrawer());

© www.soinside.com 2019 - 2024. All rights reserved.