react+antd-mobile之TabBar路由
想了解create-react-app配置antd-mobile按需加载,以及配置less和vw的可以看上一篇博客
这一篇特别记录antd-mobile的TabBar配合路由的使用
按照antd-mobile给出的文档,可以构建出此UI页面(相信都能做到)
目前的这个是没有加路由的,我想要的是,点击我的,地址栏的URL可以改成http://localhost:3000/my,在网上看了很多,也做出了效果
react-router-dom的版本为5.1.2,做了简单的封装,可以看我之前的一篇写的react路由封装
这个图片是tabbar的一个item,也就是首页,点击的时候呢,改变地址栏,对应的图标也改变,可以看到 selected 和 onPress,这个的具体作用,不细说了
pathname是从this.props.location.patnname里面获得的
因为目前来说用的是最新的react-router-dom版本,网上有些是之前版本的,有些东西有一点改变,这个组件挺重要
跳转二级页面的时候,需要把底部菜单隐藏,这个是配合redux做了一个全局变量
还有一点,因为tabbar是定位在底部的,文档上面展示的页面高度为100%,如果要配合路由的话,需要把高度和定位修改一下,在加个z-index
文笔不好,将就看吧
以上是 react+antd-mobile之TabBar路由 的全部内容, 来源链接: utcz.com/z/384271.html