我正在升级我的项目react-navigation-v4
to 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>
);
}
}
有什么帮助吗?
你需要使用反应本机选项卡视图代替createMaterialTopTabNavigator
。 createMaterialTopTabNavigator 本身包装了 react-native-tab-view 并向其添加导航逻辑(这样您就可以导航到包含选项卡的屏幕,然后导航到其中一个选项卡)。这个添加的逻辑正是破坏屏幕的原因,因为您试图同时渲染 2 个导航器,这在反应导航中是不允许的
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)