React Navigation - 嵌套导航器答案

【问题标题】：React Navigation - Nested NavigatorsReact Navigation - 嵌套导航器
【发布时间】：2018-07-03 11:43:53
【问题描述】：

我正在使用 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',
});

【问题讨论】：

你试过什么？放置一些代码以更好地理解您的问题，因为这应该完全有效
在我看来，如果一个应用程序有一个滑入式菜单，它应该不可能通过滑动来“导航”回来。相反，左上角应该有一个后退按钮/箭头。它认为这也符合 android/ios 设计准则。所以我的第一个尝试是说服客户放弃该功能。对两件事使用相同的手势可能会让用户感到困惑和反直觉。
@st4rl00rd 我添加了设置堆栈/抽屉导航器的代码。所以应该可以使用 StackNavigator 的后退按钮功能在 DrawerNavigator 中导航页面？
@trixn 是的，我完全同意。我想要的是 stackNavigator 的后退按钮。
刚试了你的代码，效果很好，见videosprout.com/video?id=32d0eb71-e58b-49d1-baab-a78d861ed1c6;你使用的是什么版本的 react-navigation？

标签： reactjs react-native react-navigation stack-navigator

【解决方案1】：

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

因此，如果您想要同时拥有滑入式菜单和返回功能，则必须使用带有嵌套抽屉导航器的 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 函数。

【讨论】：