如何在同一屏幕中渲染两个Material Top Tab Navigator？

报错原因 #

你遇到的Error: Another navigator is already registered for this container，是因为React Navigation不允许在同一个NavigationContainer或单个Screen下直接渲染多个导航器——每个导航器需要拥有独立的导航上下文，否则会出现注册冲突。

解决方案 #

有两种可靠的方式解决这个问题，根据你的布局需求选择：

方式一：给每个导航器指定唯一id

直接在页面中渲染两个Top Tab导航器，给每个导航器的Navigator组件设置唯一的id属性，让React Navigation能区分它们的导航上下文。

示例代码：

import { View } from 'react-native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

const Tab = createMaterialTopTabNavigator();

// 第一个顶部标签导航组
function FirstTabGroup() {
  return (
    <Tab.Navigator id="home-first-tabs">
      <Tab.Screen name="Tab1A" component={Tab1AScreen} />
      <Tab.Screen name="Tab1B" component={Tab1BScreen} />
    </Tab.Navigator>
  );
}

// 第二个顶部标签导航组
function SecondTabGroup() {
  return (
    <Tab.Navigator id="home-second-tabs">
      <Tab.Screen name="Tab2A" component={Tab2AScreen} />
      <Tab.Screen name="Tab2B" component={Tab2BScreen} />
    </Tab.Navigator>
  );
}

// 主页面：同时渲染两个标签组
function HomeScreen() {
  return (
    <View style={{ flex: 1 }}>
      <FirstTabGroup />
      <SecondTabGroup />
    </View>
  );
}

方式二：将每个导航器嵌套在独立Screen中

如果你的页面本身是某个导航器的Screen，可以创建一个嵌套的导航器（比如Stack导航器），将两个Top Tab导航器分别作为这个嵌套导航器的Screen，确保每个导航器都有独立的父级上下文。

示例代码：

import { createStackNavigator } from '@react-navigation/stack';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

const Stack = createStackNavigator();
const Tab = createMaterialTopTabNavigator();

// 第一个标签导航器
function FirstTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Tab1A" component={Tab1AScreen} />
      <Tab.Screen name="Tab1B" component={Tab1BScreen} />
    </Tab.Navigator>
  );
}

// 第二个标签导航器
function SecondTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Tab2A" component={Tab2AScreen} />
      <Tab.Screen name="Tab2B" component={Tab2BScreen} />
    </Tab.Navigator>
  );
}

// 嵌套导航器作为主页面内容
function HomeScreen() {
  return (
    <Stack.Navigator screenOptions={{ headerShown: false }}>
      <Stack.Screen name="FirstTabSet" component={FirstTabs} />
      <Stack.Screen name="SecondTabSet" component={SecondTabs} />
    </Stack.Navigator>
  );
}

注：这种方式适合需要切换显示两个标签组的场景，如果是需要同时显示（如上下排列），方式一更直接。

内容的提问来源于stack exchange，提问作者Rohan Rajesh