如何同时使用抽屉导航器和标签导航器? [英] How to use drawer navigator and tab navigator simultaneously?

问题描述

这是我的标签导航器:

<Tab.Navigator initialRouteName="Home" backBehavior="initialRoute">
  <Tab.Screen
    name="Science"
    component={Science}
    options={{
      tabBarLabel: 'Science',
      tabBarIcon: ({color, size}) => (
        <Image source={require('../../assets/images/science-tab.png')} />
      ),
    }}
  />
  <Tab.Screen name="Dashboard" component={Dashboard} />
</Tab.Navigator>

这是抽屉导航器:

<Drawer.Navigator initialRouteName="Home">
  <Drawer.Screen name="Home" component={HomeScreen} />
  <Drawer.Screen name="Notifications" component={NotificationsScreen} />
</Drawer.Navigator>

这是我的根导航器:Bottomnavigation 下方是选项卡导航器.

And this is my root navigator: Below Bottomnavigation is the tab navigator.

<NavigationContainer>
  <Stack.Navigator>
    <Stack.Screen
      name="BottomNavigation"
      component={BottomNavigation}
      options={{title: this.createTitle()}}
    />
  </Stack.Navigator>
</NavigationContainer>

推荐答案

我建议你让你的 TabNavigator 成为 DrawerNavigator

I recommend you to make your TabNavigator a screen of DrawerNavigator

你可以这样做:

function TabNavigator({navigation}) {
  return (
    <Tab.Navigator>
      // Your tab screens
    </Tab.Navigator>
  );
}

function DrawerNavigator() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="TabNavigator" component={TabNavigator} />
    </Drawer.Navigator>
  );
}

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="DrawerNavigator" component={DrawerNavigator} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

如果你想打开你的抽屉，你可以在你的 TabNavigator 中调用 navigation.openDrawer().

If you want to open your drawer, you can call navigation.openDrawer() in your TabNavigator.

您可以创建一个抽屉内容组件来覆盖添加 DrawerNavigator 屏幕标签作为抽屉内容的默认行为.

You can create a drawer content component to override the default behavior of adding the DrawerNavigator screens' labels as the content of the drawer.

function CustomDrawerContent(props) {
  return (
    <DrawerContentScrollView {...props}>
      <DrawerItem
        label="Home"
        onPress={() => props.navigation.navigate('Home')}
      />
      // ...
    </DrawerContentScrollView>
  );
}

然后你需要把DrawerNavigator改成这样:

Then you need to change the DrawerNavigator to this:

function DrawerNavigator({route}) {
  return (
    <Drawer.Navigator
      drawerContent={(props) => <CustomDrawerContent {...props} />}>
      <Drawer.Screen name="TabNavigator" component={TabNavigator} />
      <Drawer.Screen name="Home" component={Home} />
    </Drawer.Navigator>
  );
}

因此您可以将新屏幕添加到 DrawerNavigator 并使用 DrawerItem onPress 函数导航到它们.

So you can add new screens to your DrawerNavigator and navigate to them using the DrawerItem onPress function.

当然确保从 @react-navigation/drawer 导入 DrawerContentScrollView、DrawerItemList 和 DrawerItem.

Of course make sure to import DrawerContentScrollView, DrawerItemList and DrawerItem from @react-navigation/drawer.

有关更多信息，请查看:https://reactnavigation.org/docs/drawer-navigator/#providing-a-custom-drawercontent.

For more info look at: https://reactnavigation.org/docs/drawer-navigator/#providing-a-custom-drawercontent.

这篇关于如何同时使用抽屉导航器和标签导航器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！