Question

我正在开发RN应用，但遇到了一些麻烦。我有一个底部标签导航器（使用this）。

在其中一个标签中，我有一个堆栈导航器，在该堆栈中，我需要另一个标签导航器。

问题是此“嵌套”选项卡导航器位于父选项卡导航器的顶部。想法是“嵌套”标签导航器覆盖了另一个导航器。

这是我的结构（伪代码）：

const NestedTabs = createMaterialBottomTabNavigator(
  NestedTab1,
  NestedTab2
);

const Tab4 = createStackNavigator(
  Main,
  NestedTabs
);

const mainTabs = createMaterialBottomTabNavigator(
  Tab1,
  Tab2,
  Tab3,
  Tab4
);

谢谢。

Answer 1

您可以更改导航树的顺序。首先声明一个包含2个bottomTabNavigator的stackNavigator：

const mainStack = createStackNavigator(
  mainTabs,
  nestedBottomTabs
);

const nestedBottomTabs = createMaterialBottomTabNavigator(
  nestedBottomTab1,
  nestedBottomTab2
);

const mainTabs = createMaterialBottomTabNavigator(
  tab1,
  tab2,
  tab3,
  tab4
);

假设您正在从tab4导航到nestedBottomTabs，mainTabs底部导航器将不再显示。

我创建了一个working example（我不知道为什么，但是它不适用于网络版本，您必须在android或ios上进行测试）

在底部标签中反应本机底部标签

1 个答案: