使用嵌套堆栈和抽屉式导航器进行导航

时间:2019-07-05 14:19:18

标签: react-native react-navigation

我正在尝试开发一个具有auth,抽屉和其他堆栈的简单应用程序!我无法嵌套这些。

这是流程:

 --AuthStack
   --SplashScreen
   --Login
   --FogotPassword
   --DrawerStack
 --DrawerStack
   --MainAppStack
   --Training
   --etc
 --MainAppStack
   --Home
   --screen2
   --screen3

等,例如,经过身份验证流程后,我的主屏幕将是抽屉屏幕,这是mainAppStack中的主屏幕。现在,我该如何从家里导航到screen2和screen3等?

我没有标题,并且我无法设置标题。在使用硬件时,返回主屏幕。

请指导!

还有我的导航器设置!

   const AppStackNavigator = createStackNavigator({
Home: {
screen: Home,
navigationOptions: {
 header: null
 }
},
StoreList: {
screen: StoreList,
navigationOptions: {
  header: null
 }
},
EditSurvey: {
screen: EditSurvey,
navigationOptions: {
  header: null
 }
},
StoreSurvey: {
screen: StoreSurvey,
navigationOptions: {
  header: null
 }
},
Competition: {
screen: Competition,
navigationOptions: {
  header: null
 },
},
Display: {
screen: Display,
navigationOptions: {
  header: null
 },
}, 
SurveyCheckList: {
screen: SurveyCheckList,
navigationOptions: {
  headerTransparent: true
 }
},
});

const DrawerNavigator = createDrawerNavigator({
Dashboard: {
  screen: AppStackNavigator,
  navigationOptions: {
    drawerLabel: "Home",
  }
},
Training: {
  screen: TrainingList,
  navigationOptions: {
    drawerLabel: "Training"
  }
},
RoutePlan: {
  screen: RouteCalendar,
  navigationOptions: {
    drawerLabel: "Route Plan"
  }
 }
},
{
 contentOptions: {
  activeTintColor: '#127CC1',
 },
 contentComponent: props => <DrawerComponent {...props}/>,
 drawerOpenRoute: 'DrawerOpen',
 drawerCloseRoute: 'DrawerClose',
 drawerToggleRoute: 'DrawerToggle',
 navigationOptions : ({navigation}) => {
  const { routeName } = navigation.state.routes[navigation.state.index];
  const headerTitle = routeName;
  return {
      headerTitle,
      headerLeft: (
        <Icon name="md-menu" style={{ marginLeft: 10 }} 
        onPress={() => navigation.toggleDrawer()}
        />
      )
    }
  }
  }
 );

 const AuthStackNavigator = createStackNavigator(
 {
 SplashScreen: {
 screen: SplashScreen,
 navigationOptions: {
  headerTransparent: true
  }
 },
 LoginScreen: {
 screen: Login,
 navigationOptions: {
  headerTransparent: true
 }
 },
 Drawer: DrawerNavigator,
 });

0 个答案:

没有答案