React Navigation--DrwaerNavigator 详细的例子

/**
 * Created by YiBing on 2017/5/5.
 * DrawerNavigator：主要和StackNavigator功能差不多，然后多了抽屉功能。
 * 本程序效果：有三个页面，每个页面都能打开抽屉，抽屉页面显示的是三个页面的名称,*   每个页面可以跳转，Home->Notifications->Notifications2,点击抽屉中的条目，也可以跳转到相应的页面,*   第一个页面还有两个特殊按钮，一个可以打开抽屉，一个可以关闭抽屉。
 *
 * this.props.navigation.navigate('DrawerOpen'); // open drawer
 * this.props.navigation.navigate('DrawerClose'); // close drawer
 *
 * API Definition
 DrawerNavigator(RouteConfigs,DrawerNavigatorConfig)
 RouteConfigs
 The route configs object is a mapping from route name to a route config,which tells the navigator what to present for that route,see example from StackNavigator.
 DrawerNavigatorConfig
 drawerWidth - Width of the drawer
 drawerPosition - Options are left or right. Default is left position.
 contentComponent - Component used to render the content of the drawer,for example,navigation items. Receives the navigation prop for the drawer. Defaults to DrawerItems.
 For more information,see below.
 contentOptions - Configure the drawer content,see below.
 Example:
 Default the DrawerView isn't scrollable. To achieve a scrollable View,you have to use
 the contentComponent to customize the container,as you can see in the example below.
 {
   drawerWidth: 200,drawerPosition: 'right',contentComponent: props => <ScrollView><DrawerItems {...props} /></ScrollView>
 }
 Several options get passed to the underlying router to modify navigation logic:
 initialRouteName - The routeName for the initial route.
 order - Array of routeNames which defines the order of the drawer items.
 paths - Provide a mapping of routeName to path config,which overrides the paths set in the routeConfigs.
 backBehavior - Should the back button cause switch to the initial route? If yes,set to initialRoute,otherwise none. Defaults to initialRoute behavior.
 Providing a custom contentComponent
 You can easily override the default component used by react-navigation:
 import { DrawerItems } from 'react-navigation';

 const CustomDrawerContentComponent = (props) => (
 <View style={style.container}>
 <DrawerItems {...props} />
 </View>
 );

 const styles = StyleSheet.create({
  container: {
    flex: 1,},});
 contentOptions for DrawerItems
 activeTintColor - label and icon color of the active label
 activeBackgroundColor - background color of the active label
 inactiveTintColor - label and icon color of the inactive label
 inactiveBackgroundColor - background color of the inactive label
 style - style object for the content section
 labelStyle - style object to overwrite Text style inside content section,when your label is a string
 Example:
 contentOptions: {
  activeTintColor: '#e91e63',style: {
    marginVertical: 0,}
}
 Screen Navigation Options
 title
 Generic title that can be used as a fallback for headerTitle and drawerLabel
 drawerLabel
 String,React Element or a function that given { focused: boolean,tintColor: string } returns a React.Element,to display in drawer sidebar. When undefined,scene title is used
 drawerIcon
 React Element or a function,that given { focused: boolean,to display in drawer sidebar
 Navigator Props
 The navigator component created by DrawerNavigator(...) takes the following props:
 screenProps - Pass down extra options to child screens,for example:
 const DrawerNav = DrawerNavigator({
  // config
});

 <DrawerNav
 screenProps={
      //this prop will get passed to the screen components and nav options as props.screenProps
  }/>
 */

import React from 'react';

import {
    Button,ScrollView,Text,StyleSheet,Image,View,TouchableOpacity,} from 'react-native';

import {
    DrawerNavigator,} from 'react-navigation';

class MyHomeScreen extends React.Component {
    static navigationOptions = {
        drawerLabel: 'Home',drawerIcon: ({ tintColor }) => (
            <Image
                source={require('./img/notif-icon.png')}
                style={[styles.icon,{tintColor: tintColor}]}
            />
        ),};

    render() {
        return (
            <View style={{flex: 1}}>
                <TouchableOpacity onPress={() => this.props.navigation.navigate('Notifications')}>
                    <Text style={{textAlign:'right',backgroundColor:'#36bfdf',height: 30,margin:20}}>Go to notifications</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => this.props.navigation.navigate('DrawerOpen')}>
                    <Text style={{textAlign:'right',margin:20}}>打开</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => this.props.navigation.navigate('DrawerClose')}>
                    <Text style={{textAlign:'right',margin:20}}>关闭</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

class MyNotificationsScreen extends React.Component {
    static navigationOptions = {
        drawerLabel: 'Notifications',drawerIcon: ({ tintColor }) => (
            <Image
                source={require('./img/notif-icon.png')}
                style={[styles.tabIcon,};

    render() {
        return (
            <Button
                onPress={() => this.props.navigation.navigate('Notifications2')}
                title="Go to notifications2"
            />
        );
    }
}

class MyNotificationsScreen2 extends React.Component {
    static navigationOptions = {
        drawerLabel: 'Notifications2',};

    render() {
        return (
            <Button
                onPress={() => this.props.navigation.navigate('Home')}
                title="Go back home"
            />
        );
    }
}

const styles = StyleSheet.create({
    icon: {
        width: 24,height: 24,});

const SimpleDrawerNavigator = DrawerNavigator({
    Home: {
        screen: MyHomeScreen,Notifications: {
        screen: MyNotificationsScreen,Notifications2: {
        screen: MyNotificationsScreen2,});

export default SimpleDrawerNavigator;