React-Native组件之 TabBarIOS和TabBarIOS.Item
时间:2022-04-27
本文章向大家介绍React-Native组件之 TabBarIOS和TabBarIOS.Item,主要内容包括TabBarIOS 组件简介、TabBarIOS 常见属性、TabBarIOS.Item 常见属性、TabBarIOS 实例、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
TabBarIOS 组件简介
目前的APP内,大部分都是选项与选项之间切换,比如:微信、微博、QQ空间…,在iOS中,我们可以通过TabItem类进行实现,那么,在React Native中,我们可以通过TabBarIOS和TabBarIOS.Item组件来实现选项卡切换效果,大家可以看到后面带有IOS,所以这个组件不支持Android,当然后面我们会通过自定义该组件来满足实际开发需求。
TabBarIOS 常见属性
- 继承了View的所有属性
- barTintColor:标签栏的背景颜色
- tintColor:当前被选中的标签图标颜色
- translucent:bool值,决定标签栏是否需要半透明化
TabBarIOS.Item 常见属性
- 继承了View的所有属性
- badge:图标右上角显示的红色角标
- icon:给当前标签指定一个自定义图标(如果定义了 systemIcon属性 这个属性会被忽略)
- onPress:点此标签被选中时调用,你应该修改过组件的状态使 selected={true}
- selected:这个属性决定了子视图是否可见,如果你看到一个空白的页面,很可能是没有选中任何一个标签
- selectedIcon:当标签被选中的时候显示的自定义图标(如果定义了systemIcon属性,这个属性会被忽略,如果定义了icon而没定义这个属性,在选中的时候图标会被染上蓝色)
- systemIcom:一些预定义的系统图标(如果使用了此属性,标题和自定义图标都会被覆盖为系统定义的值)。系统提供的属性有:’bookmarks’, ‘contacts’, ‘downloads’, ‘favorites’, ‘featured’, ‘history’, ‘more’, ‘most-recent’, ‘most-viewed’, ‘recents’, ‘search’, ‘top-rated’。
- title:在图标下面显示的标题文字(如果定义了 systemIcon属性,这个属性会被忽略)
TabBarIOS 实例
- 首先我们需要引入TabBarIOS
import {
TabBarIOS
} from 'react-native';
- 使用 TabBarIOS 很简单,但是需要配合 TabBarIOS.Item 使用,(需要注意的是我们必须给TabBarIOS设置尺寸,不然可能会造成实例化却无法看到的问题)。
render() {
return (
<View style={styles.container}>
<TabBarIOS
style={{height:49, width: width}}
>
</TabBarIOS>
</View>
);
}
- 接下来我们来给它添加 Item(TabBarIOS最多只能包含5个Item,超出的部分会用 more图标 代替)。
render() {
return (
<View style={styles.container}>
<TabBarIOS
style={{height:49, width: width}}
>
<TabBarIOS.Item
systemIcon="bookmarks" // 系统图标(bookmarks)
>
</TabBarIOS.Item>
<TabBarIOS.Item
systemIcon="contacts" // 系统图标(contacts)
>
</TabBarIOS.Item>
<TabBarIOS.Item
systemIcon="downloads" // 系统图标(downloads)
>
</TabBarIOS.Item>
<TabBarIOS.Item
systemIcon="favorites" // 系统图标(favorites)
>
</TabBarIOS.Item>
<TabBarIOS.Item
systemIcon="history" // 系统图标(history)
>
</TabBarIOS.Item>
</TabBarIOS>
</View>
);
}
4. 修改 TabBarIOS 的属性,修改选择后选项卡的颜色。
<TabBarIOS
style={{height:49, width: width}}
tintColor="green" // 被选中标签颜色
>
</TabBarIOS>
![这里写图片描述](http://img.blog.csdn.net/20170514203507107?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGlhbmd6aGlob25nOA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
修改系统自带图标
<TabBarIOS.Item
systemIcon="bookmarks" // 系统图标(bookmarks)
>
</TabBarIOS.Item>
。。。
角标
<TabBarIOS
style={{height:49, width: width}}
tintColor="green"
barTintColor="black"
translucent={false}
>
<TabBarIOS.Item
systemIcon="bookmarks" // 系统图标(bookmarks)
badge="99999999"
>
</TabBarIOS.Item>
<TabBarIOS.Item
systemIcon="contacts" // 系统图标(contacts)
badge="15"
>
</TabBarIOS.Item>
<TabBarIOS.Item
systemIcon="downloads" // 系统图标(downloads)
badge="@$!@"
>
</TabBarIOS.Item>
<TabBarIOS.Item
systemIcon="favorites" // 系统图标(favorites)
badge="aBBc"
>
</TabBarIOS.Item>
<TabBarIOS.Item
systemIcon="history" // 系统图标(history)
badge="99+"
>
</TabBarIOS.Item>
</TabBarIOS>
自定义图标(目前只支持本地图片)
<TabBarIOS.Item
renderAsOriginal={true} // 如果为false,只会显示纯色图片
icon={require('image!home')}
>
</TabBarIOS.Item>
自定义高亮图标(目前只支持本地图片,如果没有设置,则会显示选中颜色图标)
selectedIcon={require('image!baker')}
文字(如果设置了系统图标,那么这个属性会被忽略)
title="首页"
- 完整代码
class TabBarIOSScene extends Component{
getInitialState(){
return{
selectedTabItem:0
}
},
render() {
return (
<View style={styles.container}>
<TabBarIOS
style={{height:49, width: width}}
tintColor="green"
barTintColor="black"
translucent={false}
>
<TabBarIOS.Item
systemIcon="bookmarks" // 系统图标(bookmarks)
onPress={() => {this.setState({selectedTabItem:0})}}
selected={this.state.selectedTabItem == 0}
>
<View style={[styles.childViewStyle, {backgroundColor:'yellow'}]}>
</View>
</TabBarIOS.Item>
<TabBarIOS.Item
systemIcon="contacts" // 系统图标(contacts)
onPress={() => {this.setState({selectedTabItem:1})}}
selected={this.state.selectedTabItem == 1}
>
<View style={[styles.childViewStyle, {backgroundColor:'blue'}]}>
</View>
</TabBarIOS.Item>
<TabBarIOS.Item
systemIcon="downloads" // 系统图标(downloads)
onPress={() => {this.setState({selectedTabItem:2})}}
selected={this.state.selectedTabItem == 2}
>
<View style={[styles.childViewStyle, {backgroundColor:'red'}]}>
</View>
</TabBarIOS.Item>
<TabBarIOS.Item
systemIcon="favorites" // 系统图标(favorites)
onPress={() => {this.setState({selectedTabItem:3})}}
selected={this.state.selectedTabItem == 3}
>
<View style={[styles.childViewStyle, {backgroundColor:'green'}]}>
</View>
</TabBarIOS.Item>
<TabBarIOS.Item
systemIcon="history" // 系统图标(history)
onPress={() => {this.setState({selectedTabItem:4})}}
selected={this.state.selectedTabItem == 4}
>
<View style={[styles.childViewStyle, {backgroundColor:'gray'}]}>
</View>
</TabBarIOS.Item>
</TabBarIOS>
</View>
);
}
};
实际开发中,我们还需要对相似功能的代码进行抽取,以达到代码的精简。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 前端基础:CSS
- 实现一个分布式调用链路追踪Java探针你可能会遇到的问题
- 设计模式(6)[JS版]-JavaScript如何实现抽象工厂模式?
- 前端基础:JavaScript
- 设计模式(7)[JS版]-JavaScript设计模式之原型模式如何实现???
- SignalR 2.x入门(二):SignalR在MVC5中的使用
- SignalR简介
- 前端基础:jQuery
- Web API--入门--(一)ASP.NET Web API 2(C#)入门
- C# 关键字之 decimal
- 设计模式(8)[JS版]-JavaScript设计模式之如何实现适配器模式???
- Python3与OpenCV3.3 图像处理(二)--图像基本操作
- 前端基础:ECMAScript 6
- 设计模式(9)[JS版]-JavaScript设计模式之如何实现桥接模式???
- 前端基础:Boostrap