从 Drawer Navigator 导航到特定选项卡 [英] Navigate to specific tab from Drawer Navigator

问题描述

是否可以将 Tab Navigator 嵌套在 Drawer Navigator 中，然后从 Drawer 导航到特定选项卡?

Is it possible to nest a Tab Navigator inside of a Drawer Navigator and then navigate to a specific tab from the Drawer?

考虑这个非常基本的设置:

Consider this very basic set up:

const PrimaryNav = createBottomTabNavigator({
  ScreenOne,
  ScreenTwo
 })

export const DrawerNavigator = createDrawerNavigator({
  Home: {
    screen: PrimaryNav,
    drawerLabel: 'Option 1',
  },
  Investment: {
    screen: PrimaryNav,
    drawerLabel: 'Option 2',
  }
})

显然，无论您单击哪个选项，此设置都只会解析为 TabNav 中的第一项.

Obviously, this set up will just resolve to the first item in the TabNav regardless of which option you click.

有没有办法传递一个选项来专门导航到每个选项卡?我知道可以将 ScreenOne 和 ScreenTwo 传递给 DrawerNavigator 中的屏幕"选项，但我想保留选项卡.

Is there a way to pass an option to navigate to each of those tabs specifically? I know it would be possible to just pass ScreenOne and ScreenTwo to the "screen" options in DrawerNavigator, but I would like to retain the tabs.

推荐答案

有一个 hacky 解决方法 在 react-navigation GitHub 问题页面中提到:

There's a hacky workaround mentioned in react-navigation GitHub issues page:

navigation.dispatch(
    NavigationActions.reset({
      index: 0,
      actions: [NavigationActions.navigate({ routeName: 'PrimaryNav' })]
    })
);
navigation.navigate('ScreenTwo'))

不是最好的解决方案，而是我遇到同样问题时唯一能找到的方法.

Not the best solution, but the only thing I could find when I faced the same problem.

这篇关于从 Drawer Navigator 导航到特定选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！