时间戳

首页 > 解决方案 > React Navigation - 嵌套导航器

reactjs - React Navigation - 嵌套导航器

问题描述

我正在使用 React Native 开发一个移动应用程序，但我有点进退两难。我有两个要求：

1：能够向后导航。2：有一个抽屉（滑入式菜单）

我正在使用 React Navigation，它适用于这两个要求中的任何一个，但不能同时使用（至少据我了解）。

我尝试过使用 DrawerNavigator，它允许一个非常好的抽屉。但是我无法创建回退功能。在应用程序中，您应该能够打开抽屉并导航。当您在一个页面上并导航到另一个页面时，您必须能够导航回您来自的页面。据我了解，这只能在 StackNavigator 中实现。但是在 StackNavigator 中，没有抽屉功能。

所以，我想知道我的选择是什么？

嵌套导航器？我已经尝试过，但最终得到了一个只能在导航器之间导航的回退功能，而不是 StackNavigator 中的页面。所以我不确定嵌套导航器是否可以实现我想要的。

另一种可能性是创建一个完全自定义的抽屉组件，我在父组件中按状态切换。

你对这个问题有什么建议吗？

我为嵌套导航器尝试过的代码：

const Nav = createDrawerNavigator({
  Home: HomeScreen,
  Single: Single,
  Tag: Tagsview,
  Privacy: Personvern,
  Search: Search,
  Contact: Contact,
  About: About,
  Login: Login,
  MostPopular: MostPopular,
  MostShared: MostShared,
  TagsSingle: TagsSingle,
  Newest: NewestImages,
}, {
  contentComponent: ({ navigation }) => (
    <NavMenu navigation={navigation} />
  ),
},
{
  drawerBackgroundColor: '#2D2D2D',
});

const RootStack = createStackNavigator({     
  Login: Login,
  Drawer: {screen: Nav}
},
{
  initialRouteName: 'Login',
  drawerBackgroundColor: '#2D2D2D',
});

标签： reactjsreact-nativereact-navigationstack-navigator

解决方案

事实证明，正如@st4rl00rd 所指出的那样，我曾经工作过的代码，但它需要一些调整。

因此，如果您想要同时拥有滑入式菜单和 goBack 功能，则必须使用带有嵌套抽屉导航器的 stackNavigator，它工作得很好。

这是修改后的代码：

const Nav = createDrawerNavigator({
  Home: HomeScreen,    
}, {
  contentComponent: ({ navigation }) => (
    <NavMenu navigation={navigation} />
  ),
},
{
  initialRouteName: 'Home',
  drawerBackgroundColor: '#2D2D2D',
});

const RootStack = createStackNavigator({
  Single: Single,
  Tag: Tagsview,
  Privacy: Personvern,
  Search: Search,
  Contact: Contact,
  About: About,
  MostPopular: MostPopular,
  MostShared: MostShared,
  Newest: NewestImages,
  TagsSingle: TagsSingle,
  Drawer: {screen: Nav}
},
{
  initialRouteName: 'Drawer',
  drawerBackgroundColor: '#2D2D2D',
});

基本上我需要做的是交换页面。将除 HomeScreen 之外的所有页面放在“rootStack”中，因为这些页面是您可以向后导航到堆栈中的页面。并将主屏幕留在抽屉导航器中，这样当您在 stackNavigator 中导航到“抽屉”时，您可以使用 openDrawer 函数。

推荐阅读