react-native使用createBottomTabNavigator创建tabbar

react

使用的是官方推荐的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

那两个组件是这样写的:

效果图:

点击去登录页面即可跳转到登录页面

官方的解决方案:

https://reactnavigation.org/docs/tab-based-navigation

我所写的东西都是官方提供的解决方案,只是加了一些自己的理解,如果有错误,希望各位帮忙指出来