Question

我有两个导航器，一个是堆栈导航器，另一个是抽屉式导航器。我需要的是，该应用程序从登录页面开始（没有初始屏幕直接登录页面），一旦单击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)

问题是它无法从抽屉导航器从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,
});

从上面我可以从抽屉导航到Training，路线计划，但是从训练页面我无法导航回Dashboard Screen。以及如何为抽屉屏幕添加标题。之间，以上结构正确吗？

Answer 1

一种实现方式。

Drawer Navigator不会渲染它自己的标题。您必须在具有四个屏幕的Stack Navigator中渲染标题。尝试删除

navigationOptions: { header: null }

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

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

Check their docs for further information

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

1 个答案: