反应原生的两个堆栈导航器

Question

我有以下导航代码库

// drawer stack
const DrawerStack = createDrawerNavigator({
  screen1: { screen: Screen1 },
  screen2: { screen: Screen2 },
  screen3: { screen: Screen3 },
})

const DrawerNavigation = createStackNavigator({
  DrawerStack: { screen: DrawerStack }
}, {
  headerMode: 'float',
  navigationOptions: ({navigation}) => ({
    headerStyle: {backgroundColor: 'green'},
    title: 'Logged In to your app!',
    headerLeft: <Text onPress={() => navigation.navigate('DrawerOpen')}>Menu</Text>
  })
})

// login stack
const LoginStack = createStackNavigator({
  signupScreen: { screen: SplashScreen },
  loginScreen: { screen: Login },
//   forgottenPasswordScreen: { screen: ForgottenPasswordScreen, navigationOptions: { title: 'Forgot Password' } }
}, {
  headerMode: 'float',
  navigationOptions: {
    headerStyle: {backgroundColor: 'red'},
    title: 'You are not logged in'
  }
})

// Manifest of possible screens
const Nav = createStackNavigator({
  loginStack: { screen: LoginStack },
  drawerStack: { screen: DrawerNavigation }
}, {
  // Default config for all screens
  headerMode: 'none',
  title: 'Main',
  initialRouteName: 'loginStack'
})

一个是未登录的，一个是登录后的

最初它会正确登录/注册页面

然后登录后我就这样做了

this.props.navigation.navigate("screen3");

但抽屉没有显示。

使用登录后如何渲染抽屉。

谢谢

Answer 1

你试过 switchNavigator 吗？

import {
  createAppContainer,
  createStackNavigator,
  createDrawerNavigator,
  createSwitchNavigator
} from "react-navigation";

.
.
.
const switchNavigator = createSwitchNavigator(
  {
    LoginStack: LoginStack,
    DrawerStack: DrawerNavigation
  },
  { headerMode: "none", initialRouteName: "LoginStack" }
);

const App = createAppContainer(switchNavigator);

export default App;

当您想切换到下一个堆栈时，请使用以下命令，

this.props.navigation.navigate("DrawerStack");

如果您想打开抽屉，请使用以下按钮单击，

import { DrawerActions } from "react-navigation";
...
...
...
this.props.navigation.dispatch(DrawerActions.openDrawer());