ReactNative——导航器createBottomTabNavigator(底部标签导航器篇)
上一篇有讲到堆栈式导航器的写法,点这里->堆栈式导航器
标签导航器官网链接
先安装依赖包
yarn add @react-navigation/bottom-tabs接着在src/navigator文件夹下新建BottomTabs.tsx文件,写法跟堆栈式导航器类似的~
import React from 'react';
import { NavigationContainer } from '@/react-navigation/native';
import { createBottomTabNavigator } from '@/react-navigation/bottom-tabs'
import Home from '@/pages/Home';
import Listen from '@/pages/Listen';
import Found from '@/pages/Found';
import Account from '@/pages/Account';export type BottomTabParamList = {Home:undefined;Listen:undefined;Found:undefined;Account:undefined;
}const Tab = createBottomTabNavigator<BottomTabParamList>()class BottomTabs extends React.Component {render() {return (<NavigationContainer><Tab.Navigator><Tab.Screen name="Home" component={Home}/><Tab.Screen name="Listen" component={Listen}/><Tab.Screen name="Found" component={Found}/><Tab.Screen name="Account" component={Account}/></Tab.Navigator></NavigationContainer>)}
}export default BottomTabs;然后在src/index.tsx使用该导航器
import Navigator from '@/navigator/BottomTabs';export default Navigator;

如何更改为自定义的标签名字?
在options属性里修改
<NavigationContainer><Tab.Navigator><Tab.Screen name="Home" component={Home}options={{tabBarLabel:'首页'}}/><Tab.Screenname="Listen" component={Listen} options={{tabBarLabel:'我听'}}/><Tab.Screen name="Found" component={Found} options={{tabBarLabel:'发现'}}/><Tab.Screen name="Account" component={Account} options={{tabBarLabel:'我的'}}/></Tab.Navigator>
</NavigationContainer>【改动后效果如下图】


如何更改标签选中的颜色?
使用tabBarOptions属性
<NavigationContainer><Tab.Navigator tabBarOptions={{activeTintColor:'#f86442',}}><Tab.Screen name="Home" component={Home}options={{tabBarLabel:'首页'}}/><Tab.Screenname="Listen" component={Listen} options={{tabBarLabel:'我听'}}/><Tab.Screen name="Found" component={Found} options={{tabBarLabel:'发现'}}/><Tab.Screen name="Account" component={Account} options={{tabBarLabel:'我的'}}/></Tab.Navigator>
</NavigationContainer>如果要实现在首页里点击某处跳转到详情页要怎么实现呢?这涉及到导肮嵌套
将堆栈式导航器嵌套到标签导航器
在首页里嵌套堆栈式导航器BottomTabs.tsx
import React from 'react';
import { NavigationContainer } from '@/react-navigation/native';
import { createBottomTabNavigator } from '@/react-navigation/bottom-tabs'
import Test from './index'; // 注意这里引入的是堆栈式导航器组件
import Listen from '@/pages/Listen';
import Found from '@/pages/Found';
import Account from '@/pages/Account';export type BottomTabParamList = {Test:undefined; // 这里改一下Listen:undefined;Found:undefined;Account:undefined;
}const Tab = createBottomTabNavigator<BottomTabParamList>()class BottomTabs extends React.Component {render() {return (<NavigationContainer><Tab.Navigator><Tab.Screen name="Test" component={Test}/><Tab.Screen name="Listen" component={Listen}/><Tab.Screen name="Found" component={Found}/><Tab.Screen name="Account" component={Account}/></Tab.Navigator></NavigationContainer>)}
}export default BottomTabs;修改堆栈式导航器index.tsx(去掉NavigationContainer)
import React from 'react';
import {NavigationContainer} from '@react-navigation/native'
import {createStackNavigator} from '@react-navigation/stack'
import Home from '@/pages/Home';
import Detail from '@/pages/Detail';
import {createStackNavigator,StackNavigationProp,
} from '@react-navigation/stack'; // 自动引入type RootStackPareamList = {Home: undefined; // 这里改一下Detail:undefined;
}export type RootStackNavigation = StackNavigationProp<RootStackPareamList>const Stack = createStackNavigator<RootStackPareamList>();
/*{Navigator, // 导航器Screen // 路由,也就是页面
}
*/class Navigator extends React.Component {render(){return (<Stack.NavigatorheaderMode="float"screanOptions={{headerTitleAlign:'center',}}><Stack.Screen options={{ headerTitleAlign:'left, headerTitle:'首页'}} name="Home" component={Home}/><Stack.Screen name="Detail" component={Detail}/></Stack.Navigator>);}
}export default Navigator;此时当在首页点击跳转详情页的时候,就能实现跳转了,下面的标签栏是不会消失的,如果想在跳转的时候底部导航器消失要怎么做呢?
将标签导航器嵌套到堆栈式导航器
修改标签导航器的代码问以下,去掉NavigationContainer
import React from 'react';
import { NavigationContainer } from '@/react-navigation/native';
import { createBottomTabNavigator } from '@/react-navigation/bottom-tabs'
import Home from '@/pages/Home'; // 注意这里改回为Home组件
import Listen from '@/pages/Listen';
import Found from '@/pages/Found';
import Account from '@/pages/Account';export type BottomTabParamList = {Home:undefined;Listen:undefined;Found:undefined;Account:undefined;
}const Tab = createBottomTabNavigator<BottomTabParamList>()class BottomTabs extends React.Component {render() {return (<Tab.Navigator><Tab.Screen name="Home" component={Home}/><Tab.Screen name="Listen" component={Listen}/><Tab.Screen name="Found" component={Found}/><Tab.Screen name="Account" component={Account}/></Tab.Navigator>)}
}export default BottomTabs;将堆栈式导航器组件index.tsx还原到上一篇中的写法(即不要去掉NavigationContainer)
然后引入标签导航器
import React from 'react';
import {NavigationContainer} from '@react-navigation/native'
import {createStackNavigator} from '@react-navigation/stack'
// import Home from '@/pages/Home'; // 注意这里改成引入标签导航器了
import BottomTabs from './BottomTabs'; // 引入标签导航器
import Detail from '@/pages/Detail';
import {createStackNavigator,StackNavigationProp,
} from '@react-navigation/stack'; // 自动引入type RootStackPareamList = {BottomTabs: undefined; // 这里改一下Detail:undefined;
}export type RootStackNavigation = StackNavigationProp<RootStackPareamList>const Stack = createStackNavigator<RootStackPareamList>();
/*{Navigator, // 导航器Screen // 路由,也就是页面
}
*/class Navigator extends React.Component {render(){return (<NavigationContainer><Stack.NavigatorheaderMode="float"screanOptions={{headerTitleAlign:'center',}}><Stack.Screen options={{ headerTitleAlign:'left, headerTitle:'首页'}} name="BottomTabs" component={BottomTabs}/><Stack.Screen name="Detail" component={Detail}/></Stack.Navigator>);}
}export default Navigator;然后在src/index.tsx中修改为使用堆栈式导航器(因为是往堆栈式里嵌套了标签导航器,所以本质上其实是使用了堆栈式导航器为主体)
import Navigator from '@/navigator/index';export default Navigator;现在为止,就能实现跳转到详情页的时候,底部标签导航器消失了,
但是会有一个问题,当点击底部导航栏跳转的时候,标题总是显示首页,如下图所示

如何动态修改标题栏?
在BottomTabs.tsx中增加以下代码
import React from 'react';
import { NavigationContainer } from '@/react-navigation/native';
import { createBottomTabNavigator } from '@/react-navigation/bottom-tabs'
import Home from '@/pages/Home';
import Listen from '@/pages/Listen';
import Found from '@/pages/Found';
import Account from '@/pages/Account';export type BottomTabParamList = {Home:undefined;Listen:undefined;Found:undefined;Account:undefined;
}const Tab = createBottomTabNavigator<BottomTabParamList>() // 这里
type Route = RouteProp<RootStackParamList,'BottomTabs'>&state?:TabNavigationState;
}// 这里
interface IProps { navigation: RootStackNavigation;route:RouteProp<RootStackParamList,'BottomTabs'>;
}// 增加一个获取标题名称的方法
function getHeaderTitle(route: Route) {const roureName = route.state? route.state.routes[route.state.index].name: route.params?.screen || 'Home';switch(routeName) {case 'Home':return '首页';case 'Listen':return '我听';case 'Found':return '发现';case 'Account':return '账户';default:return '首页'}
}class BottomTabs extends React.Component<IProps>{// props发生变化就会执行生命周期componentDidUpdate() {const {navigation,route} = this.props;navigation.setOptions({headerTitle:getHeaderTitle(route),});}render() {return (<Tab.Navigator><Tab.Screen name="Home" component={Home}/><Tab.Screen name="Listen" component={Listen}/><Tab.Screen name="Found" component={Found}/><Tab.Screen name="Account" component={Account}/></Tab.Navigator>)}
}export default BottomTabs;在index.tsx(堆栈式导航器)中增加以下代码
import React from 'react';
import {NavigationContainer} from '@react-navigation/native'
import {createStackNavigator} from '@react-navigation/stack'
import BottomTabs from './BottomTabs';
import Detail from '@/pages/Detail';
import {createStackNavigator,StackNavigationProp,
} from '@react-navigation/stack'; // 自动引入type RootStackPareamList = {BottomTabs: { // 这里改一下screen?: string; }; Detail:undefined;
}export type RootStackNavigation = StackNavigationProp<RootStackPareamList>const Stack = createStackNavigator<RootStackPareamList>();class Navigator extends React.Component {render(){return (<NavigationContainer><Stack.NavigatorheaderMode="float"screanOptions={{headerTitleAlign:'center',}}><Stack.Screen // options={{headerTitle:'首页'}} 删掉这个属性,因为需要动态修改name="BottomTabs" component={BottomTabs}/><Stack.Screen name="Detail" component={Detail}/></Stack.Navigator>);}
}export default Navigator;效果如下

相关文章:
ReactNative——导航器createBottomTabNavigator(底部标签导航器篇)
上一篇有讲到堆栈式导航器的写法,点这里->堆栈式导航器标签导航器官网链接先安装依赖包yarn add react-navigation/bottom-tabs接着在src/navigator文件夹下新建BottomTabs.tsx文件,写法跟堆栈式导航器类似的~import React from react; import { NavigationConta…...
【数据结构】带头双向循环链表的实现
🌇个人主页:平凡的小苏 📚学习格言:别人可以拷贝我的模式,但不能拷贝我不断往前的激情 🛸C语言专栏:https://blog.csdn.net/vhhhbb/category_12174730.html 🚀数据结构专栏ÿ…...
软件开发的权限系统功能模块设计,分享主流的九种常见权限模型
软件系统的权限控制几乎是非常常见且必备的,这篇文章整理下常见的九种模型,几乎基本够你用了,主流的权限模型主要有以下9种: 1、ACL模型 访问控制列表 2、DAC模型 自主访问控制 3、MAC模型 强制访问控制 4、ABAC模型 基于属性的访…...
CSS3-数据可视化
2D动画 - transform CSS3 transform属性允许你旋转,缩放,倾斜或平移给定元素。 Transform是形变的意思(通常也叫变换),transformer就是变形金刚 常见的函数transform function有: 平移:transl…...
硬件系统工程师宝典(15)-----PCB上的EMC设计,“拿捏了”
各位同学大家好,欢迎继续做客电子工程学习圈,今天我们继续来讲这本书,硬件系统工程师宝典。上篇我们说到PCB常用的多层板叠层结构,综合成本、性能、需求考虑选择不同的叠层结构。今天我们来看看为提高EMC性能,在PCB设计…...
vue3滚动条滚动后元素固定
代码地址:https://gitee.com/zzhua195/easyblog-web-vuee Framework.vue 在这个布局组件中,监听main的滚动事件,获取滚动的距离,将它存入store,以便其它组件能够共享,监听到 <template><div c…...
新吲哚菁绿染料IR-825 NHS,IR825 NHS ester,IR825 SE,IR-825 活性酯,用于科研实验研究和临床
IR825 NHS理论分析:中文名:新吲哚菁绿-琥珀酰亚胺酯,IR-825 琥珀酰亚胺酯,IR-825 活性酯英文名:IR825 NHS,IR-825 NHS,IR825 NHS ester,IR825 SECAS号:N/AIR825 NHS产品详…...
GO语言--接口(interface)的定义及使用
接口定义 接口也是一种数据类型,它代表一组方法的集合。 接口是非侵入式的。即接口设计者无需知道接口被哪些类型实现,而接口使用者只需知道实现怎样的接口,并且无须指明实现哪一个接口。编译器在编译时就会知道哪个类型实现哪个接口&#…...
【Python语言基础】——Python MongoDB 查询
Python语言基础——Python MongoDB 查询 文章目录 Python语言基础——Python MongoDB 查询一、Python MongoDB 查询一、Python MongoDB 查询 筛选结果 在集合中查找文档时,您能够使用 query 对象过滤结果。 find() 方法的第一个参数是 query 对象,用于限定搜索。 实例 查找地…...
第十四届蓝桥杯模拟赛【第三期】Python
1 进制转换 问题描述 请找到一个大于 2022 的最小数,这个数转换成十六进制之后,所有的数位(不含前导 0)都为字母(A 到 F)。 请将这个数的十进制形式作为答案提交。 答案:2730 def ch…...
windows 下docker 安装clickhouse
docker 下载https://www.docker.com/products/docker-desktop/将下载下来的Docker Desktop Installer.exe文件双击进行安装即可,安装完成后,任务栏会出现一个蓝色的小鲸鱼图标(注意安装完成后可能会重启系统)Docker Desktop如果出…...
【华为OD机试真题 JAVA】TLV编码问题
标题:TLV编码问题 | 时间限制:1秒 | 内存限制:262144K | 语言限制:不限 TLV编码是按TagLengthValue格式进行编码的,一段码流中的信元用tag标识,tag在码流中唯一不重复,length表示信元value的长度,value表示信元的值,码流以某信元的tag开头,tag固定占一个字节,lengt…...
深度学习 Day26——使用Pytorch实现猴痘病识别
深度学习 Day26——使用Pytorch实现猴痘病识别 文章目录深度学习 Day26——使用Pytorch实现猴痘病识别一、前言二、我的环境三、前期工作1、设置GPU导入依赖项2、导入猴痘病数据集3、划分数据集四、构建CNN网络五、训练模型1、设置超参数2、编写训练函数3、编写测试函数4、正式…...
redis简单介绍
对于一名前端工程师,想要进阶成为全栈工程师,redis技术是我们一定需要掌握的。作为当前非关系型数据库Nosql中比较热门的key-value存储系统,了解redis的原理和开发是极其重要的。本文我会循序渐进的带领大家一步步认识redis,使用r…...
Understanding services:理解服务(Service)
文章目录背景1. 准备工作2. ros2 service list 命令3. ros2 service type 命令3.1 ros2 service list -t 命令4. ros2 service find 命令5. ros2 interface show 命令6. ros2 service call 命令参考官方文档: Understanding services背景 服务(Service&…...
【链表OJ题(五)】合并两个有序链表
📝个人主页:Sherry的成长之路 🏠学习社区:Sherry的成长之路(个人社区) 📖专栏链接:数据结构 🎯长路漫漫浩浩,万事皆有期待 文章目录链表OJ题(五)1. 合并…...
C++ Primer第五版_第三章习题答案(1~10)
文章目录练习3.1练习3.2一次读入一行一次读入一个词练习3.3练习3.4大的字符串长度大的字符串练习3.5未隔开的隔开的练习3.6练习3.7练习3.8练习3.9练习3.10练习3.1 使用恰当的using 声明重做 1.4.1节和2.6.2节的练习。 // 1.4.1 #include <iostream>using std::cin; using…...
小样本学习
机器学习就是从数据中学习,从而使完成任务的表现越来越好。小样本学习是具有有限监督数据的机器学习。类似的,其他的机器学习定义也都是在机器学习定义的基础上加上不同的限制条件衍生出来。例如,弱监督学习是强调在不完整、不准确、有噪声、…...
python打包成apk界面设计,python打包成安装文件
大家好,给大家分享一下如何将python程序打包成apk文件,很多人还不知道这一点。下面详细解释一下。现在让我们来看看! 1、如何用python制作十分秒加减的apk 如何用python制作十分秒加减的apk?用法:. apk包放入apk文件目录,然后输入…...
pytorch转onnx踩坑日记
在深度学习模型部署时,从pytorch转换onnx的过程中,踩了一些坑。本文总结了这些踩坑记录,希望可以帮助其他人。 首先,简单说明一下pytorch转onnx的意义。在pytorch训练出一个深度学习模型后,需要在TensorRT或者openvin…...
RestClient
什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端,它允许HTTP与Elasticsearch 集群通信,而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级ÿ…...
使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式
一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明:假设每台服务器已…...
Oracle查询表空间大小
1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...
1688商品列表API与其他数据源的对接思路
将1688商品列表API与其他数据源对接时,需结合业务场景设计数据流转链路,重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点: 一、核心对接场景与目标 商品数据同步 场景:将1688商品信息…...
linux arm系统烧录
1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 (忘了有没有这步了 估计有) 刷机程序 和 镜像 就不提供了。要刷的时…...
DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI
前一阵子在百度 AI 开发者大会上,看到基于小智 AI DIY 玩具的演示,感觉有点意思,想着自己也来试试。 如果只是想烧录现成的固件,乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外,还提供了基于网页版的 ESP LA…...
Yolov8 目标检测蒸馏学习记录
yolov8系列模型蒸馏基本流程,代码下载:这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中,**知识蒸馏(Knowledge Distillation)**被广泛应用,作为提升模型…...
Netty从入门到进阶(二)
二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架,用于…...
MySQL 知识小结(一)
一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库,分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷,但是文件存放起来数据比较冗余,用二进制能够更好管理咱们M…...
逻辑回归暴力训练预测金融欺诈
简述 「使用逻辑回归暴力预测金融欺诈,并不断增加特征维度持续测试」的做法,体现了一种逐步建模与迭代验证的实验思路,在金融欺诈检测中非常有价值,本文作为一篇回顾性记录了早年间公司给某行做反欺诈预测用到的技术和思路。百度…...
