反应本机v3抽屉导航

Question

好吧，我是编程的新手，请多多包涵，并随时像im 5大声笑般进行解释。我试图创建一个抽屉，您只能通过标题中的按钮从主页打开它。我将从那里可以访问帐户和其他视图。

这是我的密码

这就是FleetRevolution.js

import React, { Component } from "react";
import { Image, TouchableOpacity, Button } from "react-native";
import {
  createAppContainer,
  createBottomTabNavigator,
  createSwitchNavigator,
  createStackNavigator,
  createDrawerNavigator
} from "react-navigation";
import store from "./store";
import { Provider } from "react-redux";
import { Account, AddTrip, Assets, Calendar, Feed, Home, Login, CreateAsset } from "./containers";
import config from "./config";
import { NavigationActions } from 'react-navigation';
import DrawerButton from './components/views/DrawerButton';

const DrawerNav = createDrawerNavigator ({
  home: {
    screen: Home
  },
  Account: {
    screen: Account
  }
})

const HomeStack = createStackNavigator(
  {
    home: {
      screen: Home
    },
    DrawerNav: {
      screen: DrawerNav
    }
  },
  {
    defaultNavigationOptions: {
      headerRight: (
        <TouchableOpacity style={{ padding: 15 }}

        >
          <DrawerButton/>
        </TouchableOpacity>
      ),
      headerStyle: {
        backgroundColor: config.color.white,
        borderBottomWidth: 0,
        elevation: 0,
        shadowColor: "transparent"
      },
      headerTitleStyle: {
        fontWeight: "bold",
        color: config.color.black
      },
      headerTintColor: config.color.teal
    }
  }
);

const FeedStack = createStackNavigator(
  {
    feed: {
      screen: Feed
    }
  },
  {
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: config.color.white
      },
      headerTitleStyle: {
        fontWeight: "bold",
        color: config.color.black
      },
      headerTintColor: config.color.teal
    }
  }
);

const AddTripStack = createStackNavigator(
  {
    addTrip: {
      screen: AddTrip
    }
  },
  {
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: config.color.white
      },
      headerTitleStyle: {
        fontWeight: "bold",
        color: config.color.black
      },
      headerTintColor: config.color.teal
    }
  }
);

const CalendarStack = createStackNavigator(
  {
    calendar: {
      screen: Calendar
    }
  },
  {
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: config.color.white,
        borderBottomWidth: 0,
        elevation: 0,
        shadowColor: "transparent"
      },
      headerTitleStyle: {
        fontWeight: "bold",
        color: config.color.black
      },
      headerTintColor: config.color.teal
    }
  }
);

const AssetsStack = createStackNavigator(
  {
    assets: {
      screen: Assets
    }
  },
  {
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: config.color.white
      },
      headerTitleStyle: {
        fontWeight: "bold",
        color: config.color.black
      },
      headerTintColor: config.color.teal
    }
  }
);

const HomeStackContainer = createStackNavigator(
  {
    mainHome: {
      screen: HomeStack
    }
  },
  {
    mode: "modal",
    headerMode: "none"
  }
);

const FeedStackContainer = createStackNavigator(
  {
    mainFeed: {
      screen: FeedStack
    }
  },
  {
    mode: "modal",
    headerMode: "none"
  }
);

const AddTripStackContainer = createStackNavigator(
  {
    mainAddTrip: {
      screen: AddTripStack
    }
  },
  {
    mode: "modal",
    headerMode: "none"
  }
);

const CalendarStackContainer = createStackNavigator(
  {
    mainCalendar: {
      screen: CalendarStack
    }
  },
  {
    mode: "modal",
    headerMode: "none"
  }
);

const AssetsStackContainer = createStackNavigator(
  {
    mainAssets: {
      screen: AssetsStack
    },
    createAsset: {
      screen: CreateAsset
    }
  },
  {
    mode: "modal",
    headerMode: "none"
  }
);

const Tabs = createBottomTabNavigator(
  {
    home: {
      screen: HomeStackContainer,
      navigationOptions: () => {
        return {
          title: "Home",
          tabBarIcon: ({ focused, tintColor }) => {
            const color = focused ? config.color.teal : config.color.gray;
            return (
              <Image
                style={{ tintColor: color }}
                source={config.tabIcon.home}
              />
            );
          }
        };
      }
    },
    feed: {
      screen: FeedStackContainer,
      navigationOptions: () => {
        return {
          title: "Feed",
          tabBarIcon: ({ focused, tintColor }) => {
            const color = focused ? config.color.teal : config.color.gray;
            return (
              <Image
                style={{ tintColor: color }}
                source={config.tabIcon.feed}
              />
            );
          }
        };
      }
    },
    addTrip: {
      screen: AddTripStackContainer,
      navigationOptions: () => {
        return {
          title: "Add Trip",
          tabBarIcon: ({ focused, tintColor }) => {
            const color = focused ? config.color.teal : config.color.gray;
            return (
              <Image
                style={{ tintColor: color }}
                source={config.tabIcon.addTrip}
              />
            );
          }
        };
      }
    },
    calendar: {
      screen: CalendarStackContainer,
      navigationOptions: () => {
        return {
          title: "Calendar",
          tabBarIcon: ({ focused, tintColor }) => {
            const color = focused ? config.color.teal : config.color.gray;
            return (
              <Image
                style={{ tintColor: color }}
                source={config.tabIcon.calendar}
              />
            );
          }
        };
      }
    },
    assets: {
      screen: AssetsStackContainer,
      navigationOptions: () => {
        return {
          title: "Assets",
          tabBarIcon: ({ focused, tintColor }) => {
            const color = focused ? config.color.teal : config.color.gray;
            return (
              <Image
                style={{ tintColor: color }}
                source={config.tabIcon.assets}
              />
            );
          }
        };
      }
    }
  },
  {
    tabBarOptions: {
      activeTintColor: config.color.teal,
      inactiveTintColor: config.color.gray
    }
  }
);
const RootNav = createSwitchNavigator({
  //login: Login,
  main: Tabs
});
const AppContainer = createAppContainer(RootNav);

class FleetRevolution extends Component {
  render() {
    return (
      <Provider store={store}>
        <AppContainer
          ref={nav => {
            this.navigator = nav;
          }}
        />
      </Provider>
    );
  }
}
export default FleetRevolution;

这就是我的Home.js

import React, { Component } from "react";
import {
  SafeAreaView,
  View,
  StyleSheet,
  StatusBar,
  TouchableOpacity,
  Image,
  Platform
} from "react-native";
import { HomeCell } from "../components/views";
import config from "../config";
import { NavigationActions } from 'react-navigation';
import DrawerButton from '../components/views/DrawerButton';
import {
  createAppContainer,
  createBottomTabNavigator,
  createSwitchNavigator,
  createStackNavigator,
  createDrawerNavigator
} from "react-navigation";

class Home extends Component {
  static navigationOptions = ({ navigation }) => {
    return {
      headerRight: (
        <TouchableOpacity style={{ padding: 15 }}
        navigate={navigation.navigate}
        >
          <DrawerButton/>
        </TouchableOpacity>
      )
    };
  };

  render() {
    return (
      <SafeAreaView style={styles.container}>
        {Platform.OS === "ios" ? <StatusBar barStyle="dark-content" /> : null}
        <View style={styles.row}>
          <HomeCell type={config.homeCellType.trips} />
          <HomeCell type={config.homeCellType.inspections} />
        </View>
        <View style={styles.row}>
          <HomeCell type={config.homeCellType.clients} />
          <HomeCell type={config.homeCellType.search} />
        </View>
        <View style={styles.row}>
          <HomeCell type={config.homeCellType.drivers} />
          <HomeCell type={config.homeCellType.routes} />
        </View>
      </SafeAreaView>
    );
  }
}
export default Home;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: config.color.white
  },
  row: {
    flexDirection: "row",
    marginHorizontal: 15,
    marginTop: 15
  }
});

这是DrawerButton.js

import React from 'react';
import { TouchableOpacity, Platform } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';
import PropTypes from 'prop-types';


const DrawerButton = ({ navigation }) => (
  <TouchableOpacity
    onPress={() => navigation.openDrawer()}
  >
    <Ionicons name={Platform.OS === 'ios' ? 'ios-menu' : 'md-menu'} size={28}  />
  </TouchableOpacity>
);


DrawerButton.propTypes = {
  navigation: PropTypes.object.isRequired,
};

export default DrawerButton;