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

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

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

简单例子：

注意navigationOptions中的内容。

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

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