React Navigation - 嵌套导航器

Question

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

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

Answer 1

正如@st4rl00rd 所指出的，结果证明我已经使用了代码，但它需要一点调整。

因此，如果您想要同时拥有滑入式菜单和返回功能，则必须将 stackNavigator 与嵌套的 drawerNavigator 一起使用，并且效果很好。

这是编辑后的代码：

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' 中，因为这些是您可以在堆栈中向后导航的页面。并将主屏幕留在 drawerNavigator 中，以便当您在 stackNavigator 中导航到 'Drawer' 时，您可以使用 openDrawer-function.

React Navigation - 嵌套导航器

React Navigation - Nested Navigators

reactjs

react-native

react-navigation

stack-navigator