使用反应导航渲染抽屉和选项卡式导航

Question

我在我的本机应用中使用了React Navigation，我希望同时渲染抽屉导航和标签导航组件。

首先，我尝试在根应用程序组件中呈现两者，但是这会在文档here中出现错误。然后我尝试了下面列出的解决方案，为我提供了以下解决方案：

const TabNavigator = createBottomTabNavigator({
  Settings: {
    screen: SettingsScreen
  }
});

const AppNavigator = createDrawerNavigator({
  Home: {
    screen: HomeScreen
  },
  Products: {
    screen: ProductsScreen
  },
  TabNav: TabNavigator
});

export default class App extends React.Component {
  render() {
    return <AppNavigator />;
  }
}

选项卡导航仅在我在抽屉导航中选择TabNav链接时显示。我希望它在每个屏幕上。我也不希望TabNav标签显示在抽屉导航中。

我是否遗漏了文档中的内容，或者这是预期的功能？

Answer 1

对于第一个问题，将TabNav移到导航器中的第一个

TabNav: TabNavigator,
  Home: {
    screen: HomeScreen
  },
  Products: {
    screen: ProductsScreen
  } 

否则您将initialRouteName更改为“ TabNav”

对于第二个问题，

如果要在主屏幕和产品屏幕中显示TabNavigation，则需要在两者中都包含TabNavigation 否则他们需要有一个包含它们的父级TabNavigation。如果您发布TabNav包含的内容，我可以添加示例代码。

第三个问题，

您可以像这样在DrawerNavigator示例中使用contentComponent

contentComponent: props => (
    <AppDrawerContent {...props} navigation={props.navigation} />
),

编辑： 如果要让TabNavigator在每一个上显示。我认为您应该更改构造导航器的方式。

export default class App extends React.Component {
  render() {
    return < TabNavigator />;
  }
}

const TabNavigator = createBottomTabNavigator({
  Drawer: {
    screen: AppNavigator
  }
});
const AppNavigator = createDrawerNavigator({
  Home: {
    screen: HomeScreen
  },
  Products: {
    screen: ProductsScreen
  }
});

否则，如果要在每个屏幕中分别使用TabNavigator，则

const AppNavigator = createDrawerNavigator({
  HomeNavigator: {
    screen: HomeScreenNavigator
  },
  Products: {
    screen: ProductsScreen
  }
});

const HomeScreenNavigator = createBottomTabNavigator({
  Home: {
    screen: HomeScreen
  },
  Settings: {
   screen: SettingsScreen
  }
});

export default class App extends React.Component {
  render() {
    return <AppNavigator />;
  }
}

“产品”屏幕也一样。

您实际上所做的是将TabNav作为抽屉屏幕包括在内，因此它确实出现在抽屉侧栏中。

即使该结构不起作用，您也需要检查对其进行重组。或者，您可以根据自己的喜好给图片打个比方。也许我可以帮助您更好地理解。