React_Native 再学习4——导航进阶之DrawerNavigator

react

整体来说，代码使用规则和之前的StackNavigation和TabNavigation是一样的。

简单例子：

注意navigationOptions中的内容。

但重点还是看DrawerNavigatorConfig的相关内容

l drawerWidth - 抽屉宽度，可以使用Dimensions获取屏幕的宽度，动态计算

l drawerPosition - 抽屉位置，可以是left或者right

l contentComponent - 抽屉内容组件，可以自定义侧滑抽屉中的所有内容，默认为DrawerItems

l contentOptions - 用来配置抽屉内容的属性。当用来配置DrawerItems是配置属性选项：

n items - 抽屉栏目的路由名称数组，可以被修改

n activeItemKey - 当前选中页面的key id

n activeTintColor - 选中条目状态的文字颜色

n activeBackgroundColor - 选中条目的背景色

n inactiveTintColor - 未选中条目状态的文字颜色

n inactiveBackgroundColor - 未选中条目的背景色

n onItemPress(route) - 条目按下时会调用此方法

n style - 抽屉内容的样式

n labelStyle - 抽屉的条目标题/标签样式

n initialRouteName - 初始化展示的页面路由名称

n order - 抽屉导航栏目顺序，用路由名称数组表示

n paths - 路径

n backBehavior - androd点击返回键时的处理，有initialRoute和none两个值，initailRoute：返回初始界面，none：退出

写到这里感觉没什么写的了，写第一个StackNavigation会比较麻烦，写到现在整体用法都比较熟悉了，所以也不赘述了

项目git位置：https://github.com/huhanghao/TestForReact