DrawerNavigator API
DrawerNavigator(RouteConfigs,DrawerNavigatorConfig)
- RouteConfigs(必选):路由配置对象是从路由名称到路由配置的映射，告诉导航器该路由呈现什么。
- DrawerNavigatorConfig(可选):配置导航器的路由(如：默认首屏，navigationOptions，paths等)样式(如，转场模式mode、头部模式等)。
从DrawerNavigator API上可以看出DrawerNavigator支持通过RouteConfigs和DrawerNavigatorConfig两个参数来创建DrawerNavigator导航器。
RouteConfigs
RouteConfigs支持三个参数screen、path以及navigationOptions；
-
screen(必选)：指定一个React组件作为屏幕的主要显示内容，当这个组件被DrawerNavigator加载时，它会被分配一个navigationprop -
path(可选)：用来设置支持schema跳转时使用，具体时候用会在下文的相关Schema章节中讲到； -
navigationOptions(可选)：用以配置全局的屏幕导航选项如：title、headerRight、headerLeft等
DrawerNavigatorConfig
- drawerWidth - 抽屉宽度，可以使用Dimensions获取屏幕的宽度，动态计算
- drawerPosition - 抽屉位置，可以是left或者right
- contentComponent - 抽屉内容组件，可以自定义侧滑抽屉中的所有内容，默认为DrawerItems
- contentOptions - 用来配置抽屉内容的属性。当用来配置DrawerItems是配置属性选项：
- items - 抽屉栏目的路由名称数组，可以被修改
- activeItemKey - 当前选中页面的key id
- activeTintColor - 选中条目状态的文字颜色
- activeBackgroundColor - 选中条目的背景色
- inactiveTintColor -未选中条目状态的文字颜色
- inactiveBackgroundColor -未选中条目的背景色
- onItemPress(route)：条目按下时会调用此方法
- style： 抽屉内容的样式
- labelStyle：抽屉的条目标题/标签样式
- initialRouteName：初始化展示的页面路由名称
- order： 抽屉导航栏目顺序，用路由名称数组表示
- paths：路径
- backBehavior： androd点击返回键时的处理，有initialRoute和none两个值，
- initailRoute：返回初始界面，
- none：退出
navigationOptions(屏幕导航选项)
DrawerNavigator支持的屏幕导航选项的参数有：
- title:可以用作headerTitle和drawerLabel的备选的通用标题。
- drawerLabel：侧滑标题；
- drawerIcon：侧滑的标题图标，这里会回传两个参数：
{focused:boolean,tintColor:string}- focused:表示是否是选中状态；
- tintColor:表示选中的颜色；
侧边栏操作(打开、关闭、切换)
侧边栏支持以下几种操作方式：
drawerOpenRoute:'DrawerOpen',
drawerCloseRoute:'DrawerClose',
drawerToggleRoute:'DrawerToggle',
其中路由名DrawerOper对应这打开侧边栏的操作，drawerCloseRoute对应关闭侧边栏的操作，drawerToggleRoute对应切换侧边栏操作，要进行这些操作我们还需要一个navigation，navigation可以从props中获取；
- 打开侧边栏：
navigation.navigate('DrawerOpen')}; - 关闭侧边栏：
navigation.navigate('DrawerClose')}; - 切换侧边栏：
navigation.navigate('DrawerToggle')};
注意：navigation.navigate(‘DrawerOpen’); 无法正常打开侧滑
原因 ：官网已修改原文档
可通过以下方法打开
this.props.navigation.openDrawer();
this.props.navigation.closeDrawer();
this.props.navigation.toggleDrawer();
效果图
gif
代码实现
import React ,{Component}from 'react';
import {StyleSheet,Button,Image} from 'react-native';
import {DrawerNavigator} from 'react-navigation';
import ChatPage from '../pages/tabPages/ChatPage';
import TongPage from '../pages/tabPages/TongPage';
import FindPage from '../pages/tabPages/FindPage';
import MePage from '../pages/tabPages/MePage';
const tab1Normal = require('../img/home_normal.png');
const tab1Selected = require('../img/home_selected.png');
const tab2Normal = require('../img/category_normal.png');
const tab2Selected = require('../img/category_selected.png');
const tab3Normal = require('../img/find_normal.png');
const tab3Selected = require('../img/find_selected.png');
const tab4Normal = require('../img/mine_normal.png');
const tab4Selected = require('../img/mine_selected.png');
export default class DrawerNavigatorPage extends Component{
render(){
return (