Question

我正在使用React Native开发一个移动应用程序，但我遇到了一些难题。我有2个要求：

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

我正在使用React Navigation，它可以很好地满足这两个要求中的任何一个，但不能同时满足要求（至少据我所知）。

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

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

嵌套导航器？我已经尝试过，但最终只能在导航器之间进行导航，而不能在StackNavigator中导航。因此，我不确定嵌套导航器是否可以实现所需的功能。

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

您对此问题有任何提示吗？

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

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',
});

Answer 1

事实证明，正如@ 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函数。

反应导航-嵌套导航器

1 个答案: