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

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

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

简单例子:

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

注意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