ReactNative——TabNavigator的深入了解，打造一个自定义的Tab

最新推荐文章于 2024-08-13 08:46:46 发布
最新推荐文章于 2024-08-13 08:46:46 发布
阅读量1.3k 收藏
点赞数
分类专栏： ReactNative
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mikuoohash/article/details/80208508
版权
本文介绍如何使用React-Navigation的TabNavigator实现一个自定义的Tab，通过隐藏标签文字，利用tabBarIcon属性返回自定义组件，实现特殊布局需求。通过调整tabBarOptions属性，如设置showLabel和showIcon，以及修改样式，可以实现自定义Tab的样式和功能。
摘要由CSDN通过智能技术生成

                                                 

     最近有一个类似图片中的需求，左右滑动来切换下方的列表。一开始看到，就想到React-Navigation中的TabNavigator，但是，这个图中的Tab与传统的Tab有一些区别，一般的Tab都是上面一个图标，下面一个文字（类似QQ，微信的底部导航）或者没有图标，单纯是一个文字。所以看到图上的需求，还是觉得有些棘手，不知道有没有自定义Tab格式的方法，请教了其他人后，才得到答案。

     具体思路就是，TabNavigator中navigationOptions里的tabBarIcon属性是设置图标的，这个图标可以返回一个任意组件，不一定非要是一个Image，所以通过隐藏tabLabel，自定义tabBarIcon，我们就可以达到自定义Tab的目的。

     再通过两张图片，介绍一下TabNavigator的一些属性，主要是tabBarOptions的一些属性：

         

tabBarOptions:{
最低0.47元/天 解锁文章
只会写HelloWorld
关注
专栏目录
react-native结合react-navigation之TabNavigator
好好学习
07-08 2万+
react-native开发需时肯定有tab的切换，或者页面的转调，当然用RN自身的Navigator也可以但是也不是那么方便react-navigation 就能满足很多大部分需求，如下图的三种切换方式，下面就说下TabNavigator 和StackNavigator的应用，才踏的一个坑，还是太年轻呀，横刀一撸！！！！ 主要的界面 用tab 切换即是TabNavigator， 切换如下...
ReactNative进阶（十五）：应用 react-native-tab-navigator 实现底部导航栏_react native配置底部菜单栏
2301_82243603的博客
04-29 504
接着，我们将相关的图标导入工程中，具体方法在上一篇博客中已经介绍，这里不再赘述。就是我们所看到的5个Tab按钮以及它们所对应的页面，这些页面在。，所以我们必须提供图片资源（包括选中状态）、的子元素存在，这里请注意：如果添加了一个。，可以自己义，也可以直接放置其他控件。样式的分析，可以按照如下样式，为。为了代码的简洁，我们可以设计一个。后的图片资源当做参数传递！本身的性质，不可以使用动态的。对于所关心的页面切换，在。这个函数可以为我们创建。如果使用本地图片，即在。的形式引用图片，由于。在上面的代码中，由于。
React Native TabNavigator导航
m0_37068028的博客
09-28 324
APP中底部中常用的nav导航，可以使用react-native-tab-navigator安装：yarn add react-native-tab-navigator引入：import TabNavigator from 'react-native-tab-navigator';配置说明： selectedTab记录选中状态 selectedTitleStyle选中文字的样式 renderSele
探索React Native的灵活导航：TabNavigator全面解析
最新发布
gitblog_00255的博客
08-13 337
探索React Native的灵活导航：TabNavigator全面解析 react-native-tab-navigatorA tab bar that switches between scenes, written in JS for cross-platform support项目地址:https://gitcode.com/gh_mirrors/re/react-native-tab-...
TabNavigator一个reactnative底部菜单
08-10
TabNavigator一个react-native 底部菜单
react-native-tab-navigator 的使用
qq_40263927的博客
07-05 2580
react-native-tab-navigator 是兼容android 与 ios的底部菜单，非常好用。 App.js代码 /** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React, {Component} from 'react'; import { AppRegistry, StyleSheet, Text, V...
8.React Native之StackNavigator和TabNavigator结合使用
Tiger的专栏
03-04 1520
说明：StackNavigator基于react-navigation库，TabNavigator基于react-native-tab-navigator库 目录 1.TabNavigator介绍 2.TabNavigator属性介绍 3.TabNavigator.Item属性介绍 4.TabNavigator使用示例 4.1添加库几种方式 4.2引入react-nativ...
React-Native 实现点击Tab标签切换Tab页面
07-29
在React-Native开发中，创建一个用户界面时，Tab导航是一种常见的设计模式，它允许用户在不同的视图之间轻松切换。本教程将详细介绍如何使用React-Native中的TabBar组件来实现点击Tab标签切换Tab页面的功能。 首先...
React Native中导航组件react-navigation跨tab路由处理详解
11-28
`react-navigation`是一个广泛使用的导航库，它提供了多种导航组件，如`StackNavigator`、`TabNavigator`和`DrawerNavigator`等，来帮助开发者管理应用程序中的路由。 在本问题中，我们讨论的是如何在`react-...
React-Native学习之路（八）TabNavigator
Leon_Jcy的博客
07-24 613
TabNavigator 2018年7月23日 15:46 通过TabNavigator来实现底部菜单栏，因为这是一个第三方的库，所以使用这个TabNavigator需要先下载 npm install --save react-navigation 然后导入 Import TabNavigator from 'react-native-tab-navigator' 因为是个第三方库，...
React-Native-TabNavigato
大灰狼的小绵羊哥哥的博客
04-05 924
React-Native-TabNavigator切换页面（一） http://www.jianshu.com/u/e937e374c41aRN要想实现iOS中tabbar的效果，通用的就是用第三方的react-native-tab-navigator了，很好很强大，在此记录使用这个进行页面切换的效果 首先先下载 React-native-tab-navigator npm in
react-ReactNavigation带有自定义动画的TabBarComponent
08-14
ReactNavigation - 带有自定义动画的TabBarComponent
react-native 自定义 TabBar
weixin_34247032的博客
07-26 400
1.首先补充一下以前的写法 App.js /** * 入口文件 */ import React, {Component} from 'react'; import { AppRegistry, StyleSheet, Text, Image, View, } from 'react-native'; // 导航 import {Stack...
ReactNative进阶（十五）：应用 react-native-tab-navigator 实现底部导航栏
IT全栈 华强工作室
05-08 1947
1.引入react-native-tab-navigator 使用npm i react-native-tab-navigator --save引入tab库，目前最新版本为0.3.4。 接着，我们在MainScreen类中将Tab控件import进来，具体代码如下： import TabNavigator from 'react-native-tab-navigator'; export default class MainScreen extends Component { render() {
React Native 系列(九) -- Tab标签组件
weixin_30847865的博客
08-16 466
前言 本系列是基于React Native版本号0.44.3写的。很多的App都使用了Tab标签组件，例如QQ，微信等等，就是切换不同的选项，显示不同的内容。那么这篇文章将介绍RN中的Tab标签组件。 Tab标签 什么是Tab标签？(ps:我是这样叫的)，就拿微信来说吧，底部有4个选项卡，点击不同的按钮切换不同的内容。 在RN中有两个组件负责实现这样的效果，它们是: TabBarIOS...
react-native系列(15)导航篇：底部导航TabNavigator参数及使用详解
@黄小泽的个人博客
03-09 3275
本篇主要介绍的是TabNavigator，假设你已经对它的用法已经有了基本的认识，或重新去官网看一下 官网地址：https://reactnavigation.org/zh-Hans/ 底部导航TabNavigator的效果类似于微信，效果图： TabNavigator生成的底部导航的结构，它包括4部分： 选项卡栏 选项卡 图标 标签文本 createBottomTabNav...
TabNavigator自定义Tab
吴蕴强的博客
10-19 3479
react navigation三种导航，其中TabNavigation和StackNavigation用的比较多。今天要说的就是关于TabNavigation的样式问题，可能很多人都遇到过为什么明明设置了style和tabStyle还是会有问题。 我想可能会有很多人这样写： const tabbaroption = { activeTintColor: Color.f3474b,
react-native-tab-navigator简单使用
松烟入墨
09-07 969
在ReactNative项目中加入底部导航栏，效果如图所示： 效果如下： 源码：传送门第一步：导入项目npm install react-native-tab-navigator -save 第二步：文件中导入使用import TabNavigator from 'react-native-tab-navigator'tab的页面为：import React, {Component} from
react native开发第三方库（tab-navigator）
菜鸟阿都
05-29 695
使用第三方库（react-native-tab-navigator）安装方法（在项目中）npm install react-native-tab-navigator --save在项目中的package.json中可查看是否加载（project/package.json）代码（文件tab.js)import React, {Component} from 'react'; import { ...
React Native TabNavigator详细教程与实战示例
本文将深入探讨React Native中顶|底部导航的使用技巧，特别是在推荐的react-navigation库中的应用。React Native原生提供了NavigatorIOS和Navigator组件，但NavigatorIOS仅适用于iOS，而Navigator在0.44版本后已被弃...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值