反应-导航-5:同一屏幕中的多个MaterialTopTabNavigator

Question

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

错误:已为此容器注册了另一个导航器。您可能在一个“导航容器”或“屏幕”下有多个导航器。确保每个导航器都在单独的“屏幕”容器下。

我搜索了很多，我知道我可以筑巢，但如何利用它们在一起呢？

这是我的代码，给出了错误：

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本机选项卡视图而不是createMaterialTopTabNavigator。createMaterialTopTabNavigator本身封装了本机选项卡视图，并向其添加了导航逻辑(例如，您可以导航到包含选项卡的屏幕，然后再导航到其中的一个选项卡)。这个添加的逻辑正是破坏屏幕的原因，因为您正在尝试同时呈现两个导航器，这在反应导航中是不允许的。