reactjs - 使用 react 导航渲染抽屉式导航和选项卡式导航

Question

我在我的 React Native 应用程序中使用 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 显示在 HomeScreen 和 ProductsScreen 中，您需要在两者中都包含 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 作为抽屉屏幕包含在内，因此它确实出现在抽屉侧栏中。

即使此结构不起作用，您也需要检查是否对其进行重组。或者您可以提供图像以您想要的方式显示。也许我可以帮助你更好地理解。