同屏页面tabs配合drawer使用教程篇–react-native-router-flux库

 浆糊之家   2019-05-11 18:43   5 views 热度值  网名www.fybqq.com

单个页面内,同时需要底部菜单栏tabs组件,又需要抽屉式的drawer组件,可以左或右边弹出的菜单,并且可以设置某个页面不显示此右侧菜单栏组件

这次把这几个组件一起组合使用,先看一下以下演示的:

同屏页面tabs配合drawer使用教程篇--react-native-router-flux库

同屏页面tabs配合drawer使用教程篇--react-native-router-flux库

对于react-native-router-flux库怎么使用,我有一篇整理好的中文文档 文章(传送门),可以去看一下,下面只介绍此次案例的使用

 

1、在路由配置页面的文件中设置,路由页面配置如下,有详细备注

 

像icon图标生成可以写在一个页面,我单独一个文件去写了,这个不是难点,就粘部份代码,这是相对简单的部份了。

我的TabsIcon.js文件内容如下

 

就此就搞定Tabs、Scene、drawer几个组件一个页面组合使用了,但是需要注意的一个坑点就是。。drawer层级一定要在最上层,如果比tabs层级低的话,是容易出BUG的。

 发表评论


表情