Question

我一直在尝试嵌套 BottomTabNavigator 和 DrawerNavigator，但一直无法做到。我已经在我的 App.js 中编写了抽屉导航器的代码，并且导入了来自 Passenger.js 的组件 Passenger 和来自 Loveones.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>
    );

请帮助我找出错误

Answer 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>
);

BottomtabNavigator 和 DrawerNavigator 的嵌套

1 个答案: