如何在React Native单屏幕中使用两个Material Top Tab导航器

问题描述 #

我尝试在一个屏幕中添加两个createMaterialTopTabNavigator导航器，参考React Navigation文档写了代码，但运行时报错：

Another navigator is already registered for this container. You likely have multiple navigators under a single 'NavigationContainer' or 'Screen'. Make sure each navigator is under a separate 'Screen' container.

希望能在一个屏幕正确渲染两个标签导航器，原代码如下：

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

function FeedScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Feed!</Text>
    </View>
  );
}

function NotificationsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Notifications!</Text>
    </View>
  );
}

function ProfileScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }} }}>
      <Text>Profile!</Text>
    </View>
  );
}

const Tab = createMaterialTopTabNavigator();
const Tab1 = createMaterialTopTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
      initialRouteName="Feed"
      screenOptions={{
        tabBarActiveTintColor: '#e91e63',
        tabBarLabelStyle: { fontSize: 12 },
        tabBarStyle: { backgroundColor: 'powderblue' },
      }}
    >
      <Tab.Screen
        name="Feed"
        component={FeedScreen}
        options={{ tabBarLabel: 'Home' }}
      />
      <Tab.Screen
        name="Notifications"
        component={NotificationsScreen}
        options={{ tabBarLabel: 'Updates' }}
      />
      <Tab.Screen
        name="Profile"
        component={ProfileScreen}
        options={{ tabBarLabel: 'Profile' }}
      />
    </Tab.Navigator>
  );
}

function MyTabs1() {
  return (
    <Tab1.Navigator
      initialRouteName="Feed1"
      screenOptions={{
        tabBarActiveTintColor: '#e91e63',
        tabBarLabelStyle: { fontSize: 12 },
        tabBarStyle: { backgroundColor: 'powderblue' },
      }}
    >
      <Tab1.Screen
        name="Feed1"
        component={FeedScreen}
        options={{ tabBarLabel: 'Home1' }}
      />
      <Tab1.Screen
        name="Notifications1"
        component={NotificationsScreen}
        options={{ tabBarLabel: 'Updates1' }}
      />
      <Tab1.Screen
        name="Profile1"
        component={ProfileScreen}
        options={{ tabBarLabel: 'Profile1' }}
      />
    </Tab1.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyTabs />
      <MyTabs1 />
    </NavigationContainer>
  );
}

解决方法 #

问题根源 #

React Navigation不允许在同一个NavigationContainer下直接并列多个导航器，必须让它们属于同一个父组件的子元素，或者被包裹在独立的Screen中。

修改后的代码 #

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

function FeedScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Feed!</Text>
    </View>
  );
}

function NotificationsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Notifications!</Text>
    </View>
  );
}

function ProfileScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Profile!</Text>
    </View>
  );
}

const Tab = createMaterialTopTabNavigator();
const Tab1 = createMaterialTopTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
      initialRouteName="Feed"
      screenOptions={{
        tabBarActiveTintColor: '#e91e63',
        tabBarLabelStyle: { fontSize: 12 },
        tabBarStyle: { backgroundColor: 'powderblue' },
      }}
    >
      <Tab.Screen
        name="Feed"
        component={FeedScreen}
        options={{ tabBarLabel: 'Home' }}
      />
      <Tab.Screen
        name="Notifications"
        component={NotificationsScreen}
        options={{ tabBarLabel: 'Updates' }}
      />
      <Tab.Screen
        name="Profile"
        component={ProfileScreen}
        options={{ tabBarLabel: 'Profile' }}
      />
    </Tab.Navigator>
  );
}

function MyTabs1() {
  return (
    <Tab1.Navigator
      initialRouteName="Feed1"
      screenOptions={{
        tabBarActiveTintColor: '#e91e63',
        tabBarLabelStyle: { fontSize: 12 },
        tabBarStyle: { backgroundColor: 'powderblue' },
      }}
    >
      <Tab1.Screen
        name="Feed1"
        component={FeedScreen}
        options={{ tabBarLabel: 'Home1' }}
      />
      <Tab1.Screen
        name="Notifications1"
        component={NotificationsScreen}
        options={{ tabBarLabel: 'Updates1' }}
      />
      <Tab1.Screen
        name="Profile1"
        component={ProfileScreen}
        options={{ tabBarLabel: 'Profile1' }}
      />
    </Tab1.Navigator>
  );
}

// 创建父容器组件，将两个导航器放在同一视图中
function MainScreen() {
  return (
    <View style={{ flex: 1, flexDirection: 'column' }}>
      {/* 第一个标签导航器 */}
      <View style={{ flex: 1 }}>
        <MyTabs />
      </View>
      {/* 第二个标签导航器 */}
      <View style={{ flex: 1 }}>
        <MyTabs1 />
      </View>
    </View>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      {/* 只挂载一个根组件 */}
      <MainScreen />
    </NavigationContainer>
  );
}

修改说明 #

1. 新增MainScreen组件，用View将两个导航器垂直包裹，通过flex:1让它们平分屏幕高度（可根据需求调整比例）
2. NavigationContainer下仅挂载MainScreen这一个根组件，避免了多个导航器直接并列的问题
3. 修复了原代码中ProfileScreen组件里多写的一个闭合大括号的语法错误

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