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());

React Native中的两个堆栈导航器

1 个答案: