react-native - 如何同时实现堆栈导航和抽屉导航

Question

宗旨- 我想创建一个带有 3 个导航(2 种类型)的应用程序

react 导航": "^3.3.2

Authloading - 基本上是一个检查 token 的加载页面
异步存储并决定是否重定向到 AuthStack或者AppStack .

AuthStack - 它有登录和注册页面。

AppStack - 包含一些登录后打开的页面，例如仪表板、个人资料等。

到目前为止我取得的成就 -

我可以执行登录、注销、检查应用加载时用户是否已经登录。

剩下什么-
当用户来到主页/仪表板时，我希望有一个侧菜单/抽屉可以在滑动和按下按钮时打开。

我已经尝试过 React navigation 3 文档，但我认为我太新了，无法理解，
Index.js-

import React from 'react';
import { createStackNavigator, createSwitchNavigator, createAppContainer, 
createDrawerNavigator } from 'react-navigation';
import Signup from './Screens/Authentication/SignUp';
import SignInScreen from './Screens/Authentication/Login';
import HomeScreen from './Screens/DashBoard/Home';
import AuthLoadingScreen from './Screens/Authentication/AuthLoadingScreen';

const AppStack = createStackNavigator({
  Home: HomeScreen,
  //  Other: OtherScreen
});

const AuthStack = createStackNavigator({
  SignIn: SignInScreen,
  SignUp: Signup
}, {
    headerMode: 'none',
    navigationOptions: {
    headerVisible: false,
   }
  });

export default createAppContainer(createSwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen,
    App: AppStack,
    Auth: AuthStack,
  },
  {
    initialRouteName: 'AuthLoading',
  }
));

const MyDrawerNavigator = createDrawerNavigator({
  App: AppStack
});

const MyApp = createAppContainer(MyDrawerNavigator);

但我打不开抽屉
谢谢

我的 index.js 文件-

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

 AppRegistry.registerComponent(appName, () => App);

我的 package.Json 文件-

{
  "name": "SM",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.8.3",
    "react-native": "0.59.0",
    "react-native-gesture-handler": "^1.1.0",
    "react-navigation": "^3.3.2"
  },
  "devDependencies": {
    "@babel/core": "7.3.4",
    "@babel/runtime": "7.3.4",
    "babel-jest": "24.5.0",
    "jest": "24.5.0",
    "metro-react-native-babel-preset": "0.53.0",
    "react-test-renderer": "16.8.3"
  },
  "jest": {
    "preset": "react-native"
  }
}

Answer 1

尝试这个

import React from 'react';
import { createStackNavigator, createSwitchNavigator, createAppContainer, 
createDrawerNavigator } from 'react-navigation';
import Signup from './Screens/Authentication/SignUp';
import SignInScreen from './Screens/Authentication/Login';
import HomeScreen from './Screens/DashBoard/Home';
import AuthLoadingScreen from './Screens/Authentication/AuthLoadingScreen';

const AppStack = createStackNavigator({
  Home: MyDrawerNavigator,
  //  Other: OtherScreen
});

const AuthStack = createStackNavigator({
  SignIn: SignInScreen,
  SignUp: Signup
}, {
  headerMode: 'none',
  navigationOptions: {
  headerVisible: false,
 }
});

export default createAppContainer(createSwitchNavigator(
 {
   AuthLoading: AuthLoadingScreen,
   App: AppStack,
   Auth: AuthStack,
 },
 {
    initialRouteName: 'AuthLoading',
 }
));

const MyDrawerNavigator = createDrawerNavigator({
  Home: HomeScreen
});