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

Question

目标 - 我想创建一个带有3个导航的应用程序（2种类型）

react-navigation“：”^ 3.3.2

• Authloading - 基本上是一个加载页面，用于检查异步存储中的令牌并决定是否重定向到AuthStack或 AppStack。 AuthStack - 它有登录和注册页面。 AppStack - 包含一些在登录后打开的页面，例如仪表板，配置文件等。

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

如果用户已经登录，我可以执行登录，注销，检查应用程序加载。

剩下的 - 当用户进入Home / Dashboard时，我希望在滑动和按下按钮时打开侧面菜单/抽屉。

我已经尝试过React navigation 3 docs，但我觉得我太新了，无法理解，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
});

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;

希望它能帮助你。 ！