BottomtabNavigator 和 DrawerNavigator 的嵌套答案

【问题标题】：nesting of BottomtabNavigator and DrawerNavigatorBottomtabNavigator 和 DrawerNavigator 的嵌套
【发布时间】：2021-06-16 09:44:42
【问题描述】：

我一直在尝试嵌套 BottomTabNavigator 和 DrawerNavigator，但一直无法这样做。我已经在我的 App.js 中编写了抽屉导航器的代码，并从Passenger.js 导入了组件Passenger，从lovedones.js 导入了Lovedones。这两个组件包含相同的bottomtabnavigator 代码，因此我的bottomtabnavigator 出现在drawernavigator 的所有屏幕中。如果我单独运行bottomtabnavigator的代码，它会完美运行。

我得到的错误是-

看起来您在另一个中嵌套了一个“NavigationContainer”。通常，您只需要一个位于应用程序根目录的容器，因此这可能是一个错误。如果这是故意的，请明确传递 'independent={true}'。请注意，这将使子导航器与父导航器断开连接，您将无法在它们之间导航。

我已经提到了我的代码-

App.js

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';


import Passenger from './Passenger';
import Lovedones from './Lovedones';


import { createDrawerNavigator } from '@react-navigation/drawer';
const Drawer = createDrawerNavigator();

export default App=() => (
<NavigationContainer>
    <Drawer.Navigator initialRouteName="Passenger">
        <Drawer.Screen name="Passenger" component={Passenger} />
        <Drawer.Screen name="Lovedones" component={Lovedones} />
      </Drawer.Navigator>
  </NavigationContainer>
);

Passenger.js

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';


import MapsScreen from './MapScreen';
import Driver from './Driver';
import Emergency from './EmergencyScreen';
import Account from './AccountScreen';

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();

export default Passenger=() => (
  <NavigationContainer>
    <Tab.Navigator initialRouteName="Map"  tabBarOptions={{ activeTintColor: '#e91e63', }}>
      <Tab.Screen name="Account" component={Account} options={{ tabBarLabel: 'Account', tabBarIcon: ({ color, size}) => (<MaterialCommunityIcons name="account-box" color={"#000000"} size={30} />), }}/>
      <Tab.Screen name="Driver" component={Driver} options={{ tabBarLabel: 'Driver Details', tabBarIcon: ({ color, size}) => (<MaterialCommunityIcons name="card-account-details" color={"#000000"} size={30} />), }}/>
      <Tab.Screen name="Map" component={MapsScreen} options={{ tabBarLabel: 'Map', tabBarIcon: ({ color, size}) => (<MaterialCommunityIcons name="map-marker" color={"#0000FF"} size={30} />), }}/>
      <Tab.Screen name="Emergency" component={Emergency} options={{ tabBarLabel: 'Emergency', tabBarIcon: ({ color, size}) => (<MaterialCommunityIcons name="alarm-light" color={"#FF0000"} size={30} />), }}/>
      
    </Tab.Navigator>
  </NavigationContainer>
);

Lovedones.js

 import React from 'react';
    import { NavigationContainer } from '@react-navigation/native';
    import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
    
    import MapsScreen from './MapScreen';
    import Driver from './Driver';
    import Emergency from './EmergencyScreen';
    import Account from './AccountScreen';
    
    import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
    const Tab = createBottomTabNavigator();
    
    export default Passenger=() => (
      <NavigationContainer>
        <Tab.Navigator initialRouteName="Map"  tabBarOptions={{ activeTintColor: '#e91e63', }}>
          <Tab.Screen name="Account" component={Account} options={{ tabBarLabel: 'Account', tabBarIcon: ({ color, size}) => (<MaterialCommunityIcons name="account-box" color={"#000000"} size={30} />), }}/>
          <Tab.Screen name="Driver" component={Driver} options={{ tabBarLabel: 'Driver Details', tabBarIcon: ({ color, size}) => (<MaterialCommunityIcons name="card-account-details" color={"#000000"} size={30} />), }}/>
          <Tab.Screen name="Map" component={MapsScreen} options={{ tabBarLabel: 'Map', tabBarIcon: ({ color, size}) => (<MaterialCommunityIcons name="map-marker" color={"#0000FF"} size={30} />), }}/>
          <Tab.Screen name="Emergency" component={Emergency} options={{ tabBarLabel: 'Emergency', tabBarIcon: ({ color, size}) => (<MaterialCommunityIcons name="alarm-light" color={"#FF0000"} size={30} />), }}/>
          
        </Tab.Navigator>
      </NavigationContainer>
    );

请帮我找出错误

【问题讨论】：

将导航容器保留在根导航器中并从其他人中删除
非常感谢先生。由于我是初学者，您可以详细说明您的解决方案吗？它将帮助我实施您的解决方案。我无法理解。

标签： react-native react-navigation react-native-navigation react-navigation-v5 react-navigation-drawer

【解决方案1】：

从 Passenger.js 和 LovedOnes.js 中移除额外的 NavigationContainer：

Passenger.js

export default Passenger=() => (
    <Tab.Navigator initialRouteName="Map"  tabBarOptions={{ activeTintColor: '#e91e63', }}>
      <Tab.Screen name="Account" component={Account} options={{ tabBarLabel: 'Account', tabBarIcon: ({ color, size}) => (<MaterialCommunityIcons name="account-box" color={"#000000"} size={30} />), }}/>
      <Tab.Screen name="Driver" component={Driver} options={{ tabBarLabel: 'Driver Details', tabBarIcon: ({ color, size}) => (<MaterialCommunityIcons name="card-account-details" color={"#000000"} size={30} />), }}/>
      <Tab.Screen name="Map" component={MapsScreen} options={{ tabBarLabel: 'Map', tabBarIcon: ({ color, size}) => (<MaterialCommunityIcons name="map-marker" color={"#0000FF"} size={30} />), }}/>
      <Tab.Screen name="Emergency" component={Emergency} options={{ tabBarLabel: 'Emergency', tabBarIcon: ({ color, size}) => (<MaterialCommunityIcons name="alarm-light" color={"#FF0000"} size={30} />), }}/>
      
    </Tab.Navigator>
);

LovedOnes.js

export default Passenger=() => (
    <Tab.Navigator initialRouteName="Map"  tabBarOptions={{ activeTintColor: '#e91e63', }}>
      <Tab.Screen name="Account" component={Account} options={{ tabBarLabel: 'Account', tabBarIcon: ({ color, size}) => (<MaterialCommunityIcons name="account-box" color={"#000000"} size={30} />), }}/>
      <Tab.Screen name="Driver" component={Driver} options={{ tabBarLabel: 'Driver Details', tabBarIcon: ({ color, size}) => (<MaterialCommunityIcons name="card-account-details" color={"#000000"} size={30} />), }}/>
      <Tab.Screen name="Map" component={MapsScreen} options={{ tabBarLabel: 'Map', tabBarIcon: ({ color, size}) => (<MaterialCommunityIcons name="map-marker" color={"#0000FF"} size={30} />), }}/>
      <Tab.Screen name="Emergency" component={Emergency} options={{ tabBarLabel: 'Emergency', tabBarIcon: ({ color, size}) => (<MaterialCommunityIcons name="alarm-light" color={"#FF0000"} size={30} />), }}/>
      
    </Tab.Navigator>
);

【讨论】：