在应用程序中使用两个导航器 React native

Question

尝试在同一个应用程序中使用条形导航和抽屉式导航器，现在确定如何使其工作。

所以目前在 App.js 中我有一个“NavigationContainer”，在里面我有一个“BarNavigator”。 whcih 工作正常，然后我想在“NavigationContainer”中添加一个“DrawerNavigator”，然后我收到一个错误“看起来你已经在另一个中嵌套了一个'NavigationContainer'。通常你只需要一个容器在应用程序的根目录”

然后我发现这个链接完全符合what i wanted（显示在页面末尾）并应用他正在做的事情。仍然有同样的错误，然后我删除了正在工作的“BarNavigator”，并测试了 DrawerNavigator 是否有错误，是的。甚至只有 DrawerNavigator 出现错误。这是代码。

App.js

const App = () => {
return (
<NavigationContainer>
  //<HomeStackNavigator />
  <DrawerNavigator />
</NavigationContainer>
);
};
export default App;

DrawerNavigator.js

const Drawer = createDrawerNavigator();
const DrawerNavigator = () => {
 return (
   <NavigationContainer>
     <Drawer.Navigator initialRouteName="Home">
       <Drawer.Screen name="Home" component={navigation_bar} />
       {/* <Drawer.Screen name="Notifications" component={Ivestment} /> */}
     </Drawer.Navigator>
   </NavigationContainer>
 );
};
export default DrawerNavigator;

Navigator.js

const Stack = createStackNavigator();
const screenOptionStyle = {
headerShown: false,
};
const HomeStackNavigator = () => {
 return (
   <Stack.Navigator screenOptions={screenOptionStyle}>
     <Stack.Screen name="Home" component={BottomTabNavigator} />
     <Stack.Screen name="Detail" component={Detail} />
   </Stack.Navigator>
 );
};
  export default HomeStackNavigator;

Answer 1

你做错了。

您应该只有 1 个“NavigationContainer”，并且导航器应该是嵌套的，即一个在另一个内部（父子不是兄弟）。

它应该看起来像这样：

App.js

const App = () => {
     return (
          <NavigationContainer>
               <DrawerNavigator />
          </NavigationContainer>
     );
};
export default App;

DrawerNavigator.js

const Drawer = createDrawerNavigator();
const DrawerNavigator = () => {
     return (
          <Drawer.Navigator initialRouteName="Home">
               <Drawer.Screen name="Home" component={HomeTabNavigator} />
               <Drawer.Screen name="OtherScreen" component={OtherScreen} />
          </Drawer.Navigator>
     );
};
export default DrawerNavigator;

TabNavigator.js

const Tab = createTabNavigator();
const screenOptionStyle = {
     headerShown: false,
};
const HomeTabNavigator = () => {
     return (
          <Tab.Navigator screenOptions={screenOptionStyle}>
               <Tab.Screen name="Home" component={Home} />
               <Tab.Screen name="Detail" component={Detail} />
          </Tab.Navigator>
     );
};
export default HomeTabNavigator;

从下往上看可能更容易。