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, tintColor: string } returns a React.Element,
 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', backgroundColor:'#36bfdf', height: 30, margin:20}}>打开</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => this.props.navigation.navigate('DrawerClose')}>
                    <Text style={{textAlign:'right', backgroundColor:'#36bfdf', height: 30, 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, {tintColor: tintColor}]}
            />
        ),
    };

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

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

    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;