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