使用的是官方推荐的react-navigation导航库,里面有一个方法叫createBottomTabNavigator,用于创建底部tabbar,下面说一下流程
1.首先安装:
yarn add @react-navigation/native
… 要装挺多个包的,因为有可能版本更新,依赖关系改变,我就不给大家写出来了,在官网上边看吧
2.在app.js中导入组件并使用
3.创建好组件,并导入相关依赖
NavigationContainer:用这个包裹你的应用程序,必须写不然报错
createBottomTabNavigator:创建tabbar的方法
routes:我自己写的路由表(下边有截图)
4.创建并使用tabbar组件
这是写好的路由表,配合map函数一个循环写出来,就不用复制粘贴了
Tab.Navigator代表底部导航条
tabBar为自定义底部某一项的样式(可不用)
Tab.Screen tabbar中的某一项
name是路由名字
component是这个名字对应的组件
options是一些配置项,比如顶部的标题等等
如果需不要自定义tabbar的样式,上面的代码已经可以跑起来了,需要自定义的,可以去官方那拔代码,链接:https://reactnavigation.org/docs/tab-based-navigation
一般的应用,不会只有这几个tabbar页面,比如登录页,这个时候我们要从tab页面跳转到非tab页面,怎么办
不推荐一个应用程序下有多个NavigationContainer,会报错的,当然非要这样用也可以
创建每个tab对应的堆栈导航器
createStackNavigator:创建堆栈导航器并使用,默认显示最开始书写的那一个
下图为优先显示SettingsScreen
那两个组件是这样写的:
效果图:
点击去登录页面即可跳转到登录页面
