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;