react-native - react 导航-5 : Multiple MaterialTopTabNavigator in the same screen

Question

我正在将我的项目从 react-navigation-v4 升级到 react-navigation-v5。我需要在同一屏幕内有两个顶部栏，将屏幕分成两半，但通过这样做我得到了这个错误:

Error : Another navigator is already registered for this container. You likely have multiple navigators under a single "Navigation Container" or "Screen". Make sure each navigator is under separate "Screen" container.

我搜索了很多我知道我可以将它们嵌套但是如何一起使用它们？

这是我的错误代码:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import Page1 from './pages/Page1'
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

const TopTab = createMaterialTopTabNavigator();
const BottomTab = createMaterialTopTabNavigator();

const TopTabComponent = () => (
  <TopTab.Navigator>
    <TopTab.Screen name='1' component={Page1} />
    <TopTab.Screen name='2' component={Page1} />
  </TopTab.Navigator>
)

const BottomTabComponent = () => (
  <BottomTab.Navigator>
    <BottomTab.Screen name='3' component={Page1} />
    <BottomTab.Screen name='4' component={Page1} />
  </BottomTab.Navigator>
)


export default class App extends React.Component {
  render() {
    return (
      <NavigationContainer>
        <TopTabComponent />
        <BottomTabComponent />
      </NavigationContainer>
    );
  }
}

有什么帮助吗？？

Answer 1

您需要使用 react-native-tab-view而不是 createMaterialTopTabNavigator。 createMaterialTopTabNavigator 本身包装了 react-native-tab-view 并向其添加了导航逻辑(例如，您可以导航到包含选项卡的屏幕，然后导航到其中一个选项卡)。这个添加的逻辑正是破坏你的屏幕的原因，因为你试图同时呈现 2 个导航器，这在 react-navigation 中是不允许的