反应导航 - 嵌套导航器-Java 学习之路

我正在使用React Native开发移动应用程序，我有一点困境 . 我有2个要求：

1：能够导航回来 . 2：有抽屉（滑入式菜单）

我正在使用React Navigation，它适用于这两个要求中的任何一个，但不能在一起（至少我已经理解了） .

我尝试过使用DrawerNavigator，它允许一个非常漂亮的抽屉 . 但是我无法创建一个goback功能 . 在应用程序中，您应该能够打开抽屉并导航 . 当您在页面上并导航到另一个页面时，您必须能够导航回您来自的页面 . 正如我所理解的那样，这只能在StackNavigator中实现 . 但是在StackNavigator中，没有抽屉功能 .

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

嵌套导航器？我已经尝试过，但最终得到了一个只在导航器之间导航的goback功能，而不是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',
});

1 回答

0
事实证明，正如@ st4rl00rd所指出的那样，我曾经使用过的代码，但需要进行一些调整 .

因此，如果你想同时拥有一个滑入菜单和一个goBack功能，你必须使用带有嵌套的drawerNavigator的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'中，因为这些页面可以向后导航到堆栈中 . 并将主屏幕保留在drawerNavigator中，这样当您在stackNavigator中导航到'Drawer'时，您可以使用openDrawer函数 .
回复于 2024-05-19T14:07:57+08:00

反应导航 - 嵌套导航器

1 回答

相关问题