reactnative 底部tab页面@react-navigation/bottom-tabs

使用react-navigation/native做的页面导航和tab‘
官网:https://reactnavigation.org/docs/getting-started

效果图

在这里插入图片描述

安装

npm install @react-navigation/nativenpm install @react-navigation/bottom-tabs

封装tabbar.js

import { View, StyleSheet, Image } from "react-native";
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import React from 'react';
const Tab = createBottomTabNavigator();import Home from "../views/home"
import Record from "../views/record";
import Sys from "../views/sys";
import {useState} from "react";
const dataSource = [{icon: require("../assets/images/tabbar/home-un.png"),  // 未选中图标selectedIcon: require("../assets/images/tabbar/home.png"), // 选择图标tabPage: 'Home',											// 名称tabName: '首页',											// 文字badge: 0,component:Home												// 页面},{icon: require("../assets/images/tabbar/record-un.png"),selectedIcon: require("../assets/images/tabbar/record.png"),tabPage: 'Record',tabName: '记录',badge: 0,component: Record},{icon: require("../assets/images/tabbar/sys-un.png"),selectedIcon: require("../assets/images/tabbar/sys.png"),tabPage: 'Sys',tabName: '系统',badge: 0,component: Sys}];let Index=()=>{const [selectedTab,setSelect]=useState('Home');return (<View style={{ flex: 1, backgroundColor: '#F5FCFF' }}><Tab.Navigator >{dataSource.map((v, i) => {return (<Tab.Screen name={v.tabPage} component={v.component} key={i}  options={{ tabBarLabel: v.tabName,headerShown: false,tabBarIcon: ({ focused }) => (<Imagesource={focused ? v.selectedIcon : v.icon}style={{ width: 30, height: 30 }}/>),tabBarActiveTintColor: '#59E0A7',tabBarInactiveTintColor: '#5E5E5E'}}/>)})}</Tab.Navigator></View>)
}const stylesheet = StyleSheet.create({tab: {justifyContent: "center"},tabIcon: {color: "#999",width: 23,height: 23}
})
export default Index;

引入

在route,js中引入tabbar.js.设置默认展示Tarbar

        <NavigationContainer><Stack.NavigatorscreenOptions={{headerShown:false}}options={{ title: 'My home' }} initialRouteName="Tarbar" >{/*登录*/}<Stack.Screen name="Login" component={Login} /><Stack.Screen name="Tarbar" component={Tarbar} /></Stack.Navigator></NavigationContainer>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/114485.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C语言指针

指针 文章目录 指针1.指针概念2.指针变量2.1 定义指针变量2.2 引用指针变量2.3 指针变量作为函数参数 3.通过指针引用数组3.1数组元素的指针3.2 在引用数组元素时指针的运算3.3通过指针引用数组元素3.4用数组名作函数参数3.5 通过指针引用多维数组 4.通过指针引用字符串4.1字符…

vue 插槽 - 具名插槽

vue 插槽 - 具名插槽 **创建 工程&#xff1a; H:\java_work\java_springboot\vue_study ctrl按住不放 右键 悬着 powershell H:\java_work\java_springboot\js_study\Vue2_3入门到实战-配套资料\01-随堂代码素材\day05\准备代码\09-插槽-具名插槽 vue --version vue create…

Battery Charging Specification 1.2 中文详解

1. Introduction 1.1 Scope 规范定义了设备通过USB端口充电的检测、控制和报告机制,这些机制是USB2.0规范的扩展,用于专用 充电器(DCP)、主机(SDP)、hub(SDP)和CDP(大电流充电端口)对设备的充电和power up。这些机制适用 于兼容USB2.0的所有主机和外设。 1.2 Backgrou…

hugo-stack for github

静态博客框架jekyll、hexo和hugo三者之间的区别与差异 博客生成器? 全名为静态网站生成器&#xff0c; 可在任意拥有主机功能的环境下寄存(托管)可直接配合域名进行全球访问 劣势: 每次更新网页必须重新生成整个网站编译速度&#xff08;单位&#xff1a;秒&#xff09; Jek…

linux高频面试题目

01 如何使用单个命令行查看当前目录下的所有文件和子目录&#xff1f; ls -als -la 详细信息02 描述Linux中的文件权限系统。drwxr-xr–这种表示方式意味着什么&#xff1f; inux中的文件权限系统基于三种主要的实体&#xff1a;所有者&#xff08;owner&#xff09;、组&…

【Java基础面试三十九】、 finally是无条件执行的吗?

文章底部有个人公众号&#xff1a;热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享&#xff1f; 踩过的坑没必要让别人在再踩&#xff0c;自己复盘也能加深记忆。利己利人、所谓双赢。 面试官&#xff1a; finally是无条件执行的…

【temu】分析拼多多跨境电商Temu数据分析数据采集

Temu是拼多多旗下跨境电商平台&#xff0c;于2022年9月1日在美国、加拿大、新加坡、中国台湾、中国香港等市场上线。本文作者从销售额、销量、产品分布等方面&#xff0c;对Temu产品进行了分析&#xff0c;一起来看一下吧。 item_get获得商品详情item_review获得商品评论列表it…

Leetcode—1726.同积元组【中等】

2023每日刷题&#xff08;六&#xff09; Leetcode—1726.同积元组 哈希表解题思路 实现代码 class Solution { public:int tupleSameProduct(vector<int>& nums) {unordered_map<int, int>count;int n nums.size();int i, j;for(i 0; i < n - 1; i) {f…

【MySQL】数据库数据类型

文章目录 1. 整体概要2. 数值类型(有符号) tinyint 创建表(无符号) tinyint 创建表bit类型float 类型(无符号)floatdecimal 3. 二进制类型char类型varchar类型 4. 日期时间日期时间类型 5. string 类型enum类型和set类型enum类型和set类型的查找在枚举中的查找在set中的查找 1.…

函数栈帧的创建和销毁

目录 引言&#xff1a; 1&#xff0c;函数栈帧的概念 2&#xff0c;函数栈帧的创建与销毁过程 2.1预备知识 2.2main函数栈帧的创建 2.2.1push ebp 2.2.2mov ebp,esp 2.2.3sub esp,0E4h 2.2.4push ebx &#xff1b;push esi&#xff1b;push edi 2…

【Windows】Edge浏览器自动更新服务启用选禁用被拒绝访问的解决方案

Windows系统的服务窗口里&#xff0c;把一些服务的启动类型选择禁用有可能会提示拒绝访问&#xff0c;怎么弄呢&#xff0c;这里讲一讲怎样禁用这个服务。 举一个类似禁用服务的例子&#xff1a;怎样关闭Edge浏览器的自动更新服务&#xff0c; 关闭服务 已知&#xff0c;Win…

[开发|数据库] postgresql数据默认数据为null导致排序排序失效

参考文献 默认为null的数据库字段导致SQL排序失效–以pg数据库为例 解决方案 在 PostgreSQL 中&#xff0c;如果你在排序操作中使用 NULL 值&#xff0c;并且希望将 NULL 值排在结果的最后&#xff0c;可以使用 ORDER BY … NULLS LAST 语法。如果你的排序中存在 NULL 值但排…

Javascript命令模式

Javascript命令模式 1 什么是命令模式2 命令模式的例子—菜单程序3 JavaScript 中的命令模式4 撤销命令5 宏命令 1 什么是命令模式 在一个餐厅中&#xff0c;当客人现场点餐或者打电话订餐时&#xff0c;老板会把客人的需求写在清单上&#xff0c;厨师会按照清单的顺序给客人炒…

C++STL的迭代器(iterator)

一、定义 迭代器是一种检查容器内元素并且遍历容器内元素的数据类型。 【引用自&#xff1a;C迭代器&#xff08;iterator&#xff09;_c iterator_NiUoW的博客-CSDN博客】迭代器是一个变量&#xff0c;相当于容器和操纵容器的算法之间的中介。C更趋向于使用迭代器而不是数组下…

makesense在线yolov5标注

文章目录 一、创建图片文件夹和label.txt二、在线标注数据 参考文章博主&#xff1a;风吹落叶花飘荡 一、创建图片文件夹和label.txt 创建一个放置图片的文件夹images&#xff0c;存放需要标注的图片&#xff08;图片最好重命名为1,2,3…避免后面混淆&#xff09; 创建label.t…

在软件测试行业这种情况下,凭什么他能拿25k?我却约面试都难?

在当今竞争激烈的软件测试行业中&#xff0c;近期的招聘市场确实面临一些挑战。大量的求职者争相涌入岗位&#xff0c;许多热衷于功能测试的人士甚至难以找到理想的工作机会。更不幸的是&#xff0c;连自动化测试和性能测试这些专业领域也受到了测试开发人员的竞争压力。然而&a…

整理MongoDB文档:身份验证

整理MongoDB文档:身份验证 个人博客&#xff0c;求关注。 文章概叙 本文主要讲MongoDB在单机状态下的账户配置。理解了MongoDB的语法&#xff0c;对于如何配置用户权限会知道怎么配置&#xff0c;但是请注意给谁配置什么权限才是最重要的。 最小权限原则 系统的每个程序或者…

kubernetes(2)

pod管理 应用部署 上传测试镜像 [rootk8s1 docker]# docker push reg.westos.org/library/myapp:v1 [rootk8s1 docker]# docker push reg.westos.org/library/myapp:v2创建自助式pod&#xff08;生产不推荐&#xff09; [rootk8s2 ~]# kubectl run demo --imagemyapp:v1[ro…

Kotlin泛型:灵活的类型参数化

在Kotlin中&#xff0c;泛型是一项强大的特性&#xff0c;它允许我们编写可重用、类型安全且灵活的代码。通过泛型&#xff0c;我们可以将类型参数化&#xff0c;使得我们的代码可以适用于不同类型的数据&#xff0c;同时保持类型安全性。本篇博客将介绍Kotlin中的泛型类、泛型…

uniapp 安装 u-view 组件库

u-view 组件库安装教程&#xff1a;https://uviewui.com/components/install.html 注&#xff1a;以下使用 HBuilderx 安装 u-view 2.0 版本&#xff0c;不适用于其它版本。 1.安装 u-view 组件库 2、注册并登录 HBuilderx 账号&#xff0c;点击下载 u-view 组件库。 3、点击…