/**
* 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;
