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