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

Question

aim- 我想创建一个带有3个导航（2-类型）

的应用

React-Navigation"："^3.3.2

• Authloading-基本上是一个加载页面，该页面检查令牌 异步存储并决定是重定向到AuthStack还是
  AppStack。
  • AuthStack-它具有登录和注册页。
  • AppStack- contaons一些页面，这些页面在滚动后打开，例如仪表板，配置文件等

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

我可以执行登录，登录，在应用程序加载中是否已经登录。

。

剩下什么 - 当用户在家/仪表板时，我想在滑动和按下按钮上打开一个侧菜/抽屉。

我尝试了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);

我的软件包.json file-

{
  "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
});

Answer 2

略微复杂的示例在下面，其中将不同的堆栈导航器添加到drawernavigator，并且将不同的抽屉导航器添加到底部选项卡导航器中。

import React from "react";
import { Text, View } from "react-native";
import {
  createBottomTabNavigator,
  createDrawerNavigator,
  createStackNavigator,
  createAppContainer
} from "react-navigation";
import DetailsScreen from "./uicomponents/DetailsScreen";
import HomeScreen from "./uicomponents/home/HomeScreen";
import CategoriesScreen from "./uicomponents/categories/CategoriesScreen";
import HamburgerIcon from "./uicomponents/HamburgerIcon";
import HamburgerIconR from "./uicomponents/HamburgerIconR";
import SideMenu from "./uicomponents/SideMenu";
import { styles } from "./customstyles/Styles";
import { fromRight } from "react-navigation-transitions";
class SettingsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Text>Settings!</Text>
      </View>
    );
  }
}
const MainNavigator = createStackNavigator(
  {
    Home: {
      screen: HomeScreen,
      navigationOptions: ({ navigation }) => ({
        headerTitleStyle: styles.headerTitleStyle,
        headerStyle: styles.headerStyle,
        headerLeft: <HamburgerIcon navigationProps={navigation} />,
        headerRight: <HamburgerIconR navigationProps={navigation} />,
        title: `Recipes`,
        headerBackTitle: "A much too long text for back button from B to A",
        headerBackTitle: null
      })
    },
    Details: {
      screen: DetailsScreen,
      navigationOptions: () => ({
        headerTitleStyle: styles.headerTitleStyle,
        headerStyle: styles.headerStyle,
        title: `Details`,
        headerTintColor: styles.headerTintColor
      })
    },
    Categories: {
      screen: CategoriesScreen,
      navigationOptions: ({ navigation }) => ({
        headerTitleStyle: styles.headerTitleStyle,
        headerStyle: styles.headerStyle,
        headerRight: <HamburgerIconR navigationProps={navigation} />,
        title: `Categories`,
        headerTintColor: styles.headerTintColor
      })
    }
  },
  {
    //initialRouteName: 'Home',
    initialRouteName: "Home",
    transitionConfig: () => fromRight(500)
  }
);
const Drawer = createDrawerNavigator(
  {
    Home: { screen: MainNavigator },
    Regular: { screen: MainNavigator },
    Kitchens: { screen: MainNavigator },
    Restaurants: { screen: MainNavigator },
    Local: { screen: MainNavigator },
    Bookmarks: { screen: MainNavigator },
    Profile: { screen: MainNavigator },
    AboutUs: { screen: MainNavigator },
    PrivacyPolicy: { screen: MainNavigator }
  },
  {
    drawerWidth: 300,
    contentComponent: SideMenu
  }
);
const AppDrawer = createAppContainer(Drawer);
const TabNavigator = createBottomTabNavigator(
  {
    National: { screen: AppDrawer },
    International: { screen: AppDrawer },
    Regional: { screen: AppDrawer },
    Saved: { screen: AppDrawer }
  },
  {
    tabBarOptions: {
      activeTintColor: "yellow",
      inactiveTintColor: "white",
      style: {
        backgroundColor: "#A72428",
        paddingBottom:15
      }
    }
  }
);
const App = createAppContainer(TabNavigator);
export default App;

希望它应该为您提供帮助。!!