How to use the react-navigation.DrawerNavigator function in react-navigation

To help you get started, we’ve selected a few react-navigation examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github syun0216 / goforeat / app / MainView.js View on Github external
// tabBarComponent: TabBar,
    animationEnabled: false,
    swipeEnabled: false,
    tabBarPosition: "bottom",
    lazyLoad: false, //该属性只会加载tab的当前view
    tabBarComponent: TabBar,
    backBehavior: "none",
    removeClippedSubviews: false,
    tabBarOptions: {
      showLabel: true,
      showIcon: true
    }
  }
);

const darwerView = DrawerNavigator(
  {
    FoodListDrawer: {
      screen: CommonHOC(FoodListView)
    },
    MyOrderDrawer: {
      screen: CommonHOC(MyOrderView)
    },
    PickPlaceDrawer: {
      screen: CommonHOC(PickPlaceView)
    },
    PayTypeDrawer: {
      screen: CommonHOC(PaySettingView)
    },
    MonthTicketDrawer: {
      screen: CommonHOC(PurchaseMonthTicketView)
    },
github kyaroru / ReactNavDrawerRedux / src / components / drawer / index.js View on Github external
import DrawerContent from './content';
import DrawerMenu from './menu';

const getDrawerIcon = (iconName, tintColor) => ;

const homeDrawerIcon = ({ tintColor }) => getDrawerIcon('home', tintColor);
const userDrawerIcon = ({ tintColor }) => getDrawerIcon('user', tintColor);
const dashboardDrawerIcon = ({ tintColor }) => getDrawerIcon('bar-chart', tintColor);
const aboutDrawerIcon = ({ tintColor }) => getDrawerIcon('info-circle', tintColor);

const homeNavOptions = getDrawerNavigationOptions('Home', Colors.primary, 'white', homeDrawerIcon);
const userNavOptions = getDrawerNavigationOptions('Users', Colors.primary, 'white', userDrawerIcon);
const dashboardNavOptions = getDrawerNavigationOptions('Dashboard', Colors.primary, 'white', dashboardDrawerIcon);
const aboutNavOptions = getDrawerNavigationOptions('About', Colors.primary, 'white', aboutDrawerIcon);

const Drawer = DrawerNavigator({
  HomeScreen: { screen: HomeScreen, navigationOptions: homeNavOptions },
  UserScreen: { screen: UserScreen, navigationOptions: userNavOptions },
  DashboardScreen: { screen: DashboardScreen, navigationOptions: dashboardNavOptions },
  AboutScreen: { screen: AboutScreen, navigationOptions: aboutNavOptions },
}, {
  drawerWidth: 300,
  drawerPosition: 'left',
  initialRouteName: 'HomeScreen',
  contentComponent: props => ,
});

Drawer.navigationOptions = ({ navigation }) => getNavigationOptionsWithAction('ReactNavDrawer', Colors.primary, 'white', );

export default Drawer;
github tuantle / hypertoxin / examples / demo / src / app / interfaces / app-view-interface.js View on Github external
RaisedButton
} = Ht.Button;

const {
    IconImage,
    WallpaperImage
} = Ht.Image;

const {
    HeadlineText,
    TitleText
} = Ht.Text;

const DEVICE_WIDTH = Dimensions.get(`window`).width;

const AppDrawerNavigator = DrawerNavigator({
    home: {
        screen: (props) => {
            const {
                navigation,
                screenProps
            } = props;
            const {
                component
            } = screenProps;
            const {
                shade
            } = component.state;

            return (
github spencercarli / ex-navigation-to-react-navigation / app / config / routes.js View on Github external
},
    },
  },
  Analytics: {
    screen: Stack3,
    navigationOptions: {
      tabBar: {
        label: 'Analytics',
        icon: ({ tintColor }) =>
          ,
      },
    },
  },
});

export const Drawer = DrawerNavigator({
  Home: {
    screen: Stack1,
    navigationOptions: {
      drawer: {
        label: 'Home',
      },
    },
  },
  Camera: {
    screen: Stack2,
    navigationOptions: {
      drawer: {
        label: 'Camera',
      },
    },
  },
github apiko-dev / Perfi / app / navigation / NavigatorDrawer.js View on Github external
import { DrawerNavigator } from 'react-navigation';
import { Drawer } from '../components';
import Routes from './routes/RootRoutes';

const config = {
  contentComponent: Drawer,
};

export default DrawerNavigator(Routes, config);
github khle / easyRNRoute / index.android.js View on Github external
import InfoView from './Pages/info';
import SettingsView from './Pages/setting';
import { DrawerNavigator, StackNavigator } from 'react-navigation';


const stackNavigator = StackNavigator({
  Info: { screen: InfoView },
  Settings: {screen: SettingsView },
  Bookmark: {screen: BookmarkView },
  Calendar: {screen: CalendarView},
  Client: {screen: ClientView},
}, {
  headerMode: 'none'
});

const easyRNRoute = DrawerNavigator({
  Home: {
    screen: App,
  },
  Stack: {
    screen: stackNavigator
  }
}, {
  contentComponent: DrawerMenu,
  contentOptions: {
    activeTintColor: '#e91e63',
    style: {
      flex: 1,
      paddingTop: 15,
    }
  }
});
github aws-samples / aws-mobile-react-native-starter / client / App.js View on Github external
import React from 'react';
import { DrawerNavigator } from 'react-navigation';

import { WithAuth } from './lib/Categories/Auth/Components';
import Amplify from 'aws-amplify';
import awsmobile from './src/aws-exports';
import First from './src/Screens/First';
import Splash from './src/Screens/Splash';
import Home from './src/Screens/Home';
import SignOut from './src/Components/SignOut';
import ForgotPassword from './src/Components/ForgotPassword';

Amplify.configure(awsmobile);

const App = DrawerNavigator({
  Home: {
    screen: props => ,
  },
  ForgotPassword: {
    screen: (props) => {
      return  props.navigation.navigate('Home')} onSuccess={() => props.navigation.navigate('Home')} />
    }, navigationOptions: { drawerLabel: 'Change password' }
  },
  SignOut: {
    screen: (props) => {
      return 
    }, navigationOptions: { drawerLabel: 'Sign Out' }
  },
  Splash: {
    screen: props => ,
    navigationOptions: {
github daviddang91 / react-native-redux-starter-kit / src / routers / Drawer.js View on Github external
import React from "react";
import { DrawerNavigator } from "react-navigation";

import SideBar from "../components/sidebar";
import Home from "../components/home";
import ModalBox from "../components/modalbox";

const MainDrawerRouter = DrawerNavigator(
  {
    Home: {screen: Home},
    ModalBox: {screen: ModalBox},
  },
  {
    initialRouteName: "Home",
    contentOptions: {
      activeTintColor: "#e91e63"
    },
    contentComponent: props => 
  }
);

export default MainDrawerRouter;
github lohanitech / react-native-template-super / src / navigators / RootNavigator.js View on Github external
import { StackNavigator, DrawerNavigator } from 'react-navigation';
import { HomeScreen, ComponentListScreen }  from '../screens';
import globalStyles from '../styles/GlobalStyles';

const stackNavOptions = {
    navigationOptions: ({navigation})=>({
        headerStyle: globalStyles.headerStyle,
        headerTitleStyle: globalStyles.headerTitleStyle
    }),
    headerType: 'screen',
    cardStyle: {
        backgroundColor: '#fff',
    }
};

export default RootNavigator = DrawerNavigator({
    Components: { 
        screen: StackNavigator({
            First: {screen: ComponentListScreen}
        },stackNavOptions)
    },
    Home: { 
        screen: StackNavigator({
            First: {screen:HomeScreen}
        },stackNavOptions)
    },
});