react-native - 如何在 React Native 中同时显示底部导航器和抽屉导航器

Question

我是 React Native 的新手。我想构建底部导航器和抽屉导航。我使用了下面的代码，我无法从抽屉菜单导航到页面。我可以从 Tab Navigator 导航到该页面。

在代码中，Drawer Navigator 和 Tab Navigator Screens 是不同的。

    import React, { Component } from "react";
import { StyleSheet, Text, View, TouchableOpacity } from "react-native";
import Icon from "@expo/vector-icons/Ionicons";
import {
  createAppContainer,
  createDrawerNavigator,
  createBottomTabNavigator,
  createStackNavigator
} from "react-navigation";
import { Constants } from "expo";

const DrawerMenuItems = [
  {
    title: "Login",
    icon: "ios-home",
    navigateTo: "Login"
  },
  {
    title: "Feedback",
    icon: "ios-home",
    navigateTo: "Feedback"
  },
  {
    title: "Help",
    icon: "ios-help",
    navigateTo: "Help"
  }
];

export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}

class HomeScreen extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>HomeScreen</Text>
      </View>
    );
  }
}

class ContactScreen extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>ContactScreen</Text>
      </View>
    );
  }
}

class AboutScreen extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>AboutScreen</Text>
      </View>
    );
  }
}

class LoginScreen extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>LoginScreen</Text>
      </View>
    );
  }
}

class FeedbackScreen extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>FeedbackScreen</Text>
      </View>
    );
  }
}

class HelpScreen extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>HelpScreen</Text>
      </View>
    );
  }
}

class HamburgerMenu extends Component {
  constructor(props) {
    super(props);
  }

  renderMenu(menuItems) {
    {
      return menuItems.map((item, index) => {
        return (
          <View style={{ width: "100%" }} key={index}>
            <View style={styles.sideMenuItem}>
              <TouchableOpacity
                style={styles.sideMenuIcon}
                onPress={() => {
                  this.props.navigation.navigate(item.navigateTo);
                }}
              >
                <Icon name={item.icon} size={30} />
              </TouchableOpacity>

              <Text
                style={styles.menuText}
                onPress={() => {
                  this.props.navigation.navigate(item.navigateTo);
                }}
              >
                {item.title}
              </Text>
            </View>
          </View>
        );
      });
    }
  }

  render() {
    return (
      <View style={styles.sideMenuContainer}>
        {this.renderMenu(DrawerMenuItems)}
      </View>
    );
  }
}

const DrawerButton = ({ navigation }) => (
  <TouchableOpacity onPress={() => navigation.openDrawer()}>
    <Icon style={styles.menuIcon} name="md-menu" size={30} />
  </TouchableOpacity>
);

const BottomTabsNavigator = createBottomTabNavigator(
  {
    Home: HomeScreen,
    Contact: ContactScreen,
    About: AboutScreen
  },
  {
    tabBarOptions: {
      activeTintColor: "#000",
      inactiveTintColor: "gray",
      style: {
        backgroundColor: "#fff"
      },
      indicatorStyle: {
        backgroundColor: "#000"
      }
    }
  }
);

const AppDrawNavigator = createDrawerNavigator(
  {
    Main: { screen: BottomTabsNavigator }
  },
  {
    contentComponent: HamburgerMenu,
    drawerPosition: "right"
  }
);

const AppStackNavigator = createStackNavigator(
  {
    MainDrawNavigator: {
      screen: AppDrawNavigator
    }
  },
  {
    defaultNavigationOptions: ({ navigation }) => {
      return {
        header: (
          <View style={styles.header}>
            <DrawerButton navigation={navigation} />
          </View>
        ),
        headerStyle: {
          height: 60
        }
      };
    }
  }
);

const AppContainer = createAppContainer(AppStackNavigator);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center"
  },
  sideMenuContainer: {
    width: "100%",
    height: "100%",
    backgroundColor: "#fff",
    alignItems: "center",
    paddingTop: 20
  },
  sideMenuProfileIcon: {
    resizeMode: "center",
    width: 150,
    height: 150,
    borderRadius: 150 / 2
  },
  sideMenuIcon: {
    resizeMode: "center",
    width: 28,
    height: 28,
    marginRight: 10,
    marginLeft: 20
  },
  menuIcon: {
    left: 10
  },
  menuText: {
    fontSize: 15,
    color: "#222222"
  },
  header: {
    paddingTop: Constants.statusBarHeight,
    backgroundColor: "#e1e8ee",
    flexDirection: "row"
  }
});

请帮助解决这个问题。