时间戳

首页 > 解决方案 > React Native 中带有抽屉和堆栈导航器的嵌套导航

javascript - React Native 中带有抽屉和堆栈导航器的嵌套导航

问题描述

我有两个导航器，一个是堆栈导航器，另一个是抽屉导航器。我需要的是，该应用程序从登录页面（没有启动画面直接登录页面）开始，一旦点击 singin 按钮，它就需要转到仪表板（这是一个堆栈屏幕）。从这个仪表板屏幕抽屉导航器应该可以使用。这个抽屉导航器有多个堆栈导航器屏幕。

所以我的结构如下：

--AppStackNavigator
  --screen1
  --screen2
  --screen3
--DrawerNavigator
  --screen1(From above and linked above stack navigator here)
  --screen2(From above)
  --screen3(From above)
--AuthStackNavigator
  --screen1
  --screen2(Linking Drawer here)

问题是它无法从drawernavigator 从screen2 导航到screen1，而且我无法为任何drawe 导航带来标题名称。请指导我完成，使用 React Navigation V3。

这是我的代码：

 const AppStackNavigator = createStackNavigator({
  Home: {
   screen: Home,
    navigationOptions: {
     header: null
  }
 },
  RouteCalendar: {
    screen: RouteCalendar,
    navigationOptions: {
     header: null
   }
 },
 StoreList: {
   screen: StoreList,
   navigationOptions: {
    title: 'Store List'
  }
 },
Training:{
screen: Training,
navigationOptions: {
  header: null
}
 },
});

const DrawerNavigator = createDrawerNavigator({
   InitialScreen: {
   screen: AppStackNavigator,
    navigationOptions: {
    drawerLabel: "Home",
    }
  },
  Training: {
    screen: Training,
    navigationOptions: {
      drawerLabel: "Training"
    }
  },
  RoutePlan: {
    screen: RouteCalendar,
    navigationOptions: {
    drawerLabel: "Route Plan"
    }
   },
{
 contentOptions: {
  activeTintColor: '#127CC1',
},
navigationOptions : ({navigation}) => {
  return {
      headerLeft: (
        <Icon name="md-menu" style={{ marginLeft: 10 }} 
        onPress={() => navigation.toggleDrawer()}
        />
      )
    }
  }
}
);

const AuthStackNavigator = createStackNavigator(
{

  LoginScreen: {
   screen: Login,
   navigationOptions: {
    headerTransparent: true
   }
 },
 Dashboard: DrawerNavigator,
});

从上面我可以从抽屉导航到培训，路线计划，但从培训页面我无法导航回仪表板屏幕。以及如何为抽屉屏幕添加标题。而在两者之间，上述结构是否正确？

标签： javascriptreactjsreact-native

解决方案

一种方法。

抽屉导航器不会呈现它自己的标题。您必须在具有四个屏幕的 Stack Navigator 中呈现标题。尝试删除

navigationOptions: { header: null }

从 AppStackNavigator 中添加相同的内容，Dashboard: DrawerNavigator以便它不会呈现它自己的 Stack Navigator。最后从 Stack Navigator 中的 createDrawerNavigator 中移动 navigationOptions。

在 Stack Navigator 中移动 navigationOptions 后，您将能够使用“md-menu”图标从 screen1 导航到 screen2。

查看他们的文档以获取更多信息

推荐阅读