React-Native组件之 TabBarIOS和TabBarIOS.Item
来源:互联网 发布:淘宝多个客服怎么设置 编辑:程序博客网 时间:2024/06/05 04:13
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> ); } };
实际开发中,我们还需要对相似功能的代码进行抽取,以达到代码的精简。
0 0
- React-Native组件之 TabBarIOS和TabBarIOS.Item
- React native 之 tabbarIos
- React Native 之 TabBarIOS
- React Native组件之ScrollView 和 StatusBar和TabBarIos
- React Native-11.React Native TabBarIOS TabBarIOS.Item组件详解
- (七)React Native---TabBarIOS 组件
- react-native 的 TabBarIOS 组件(底部选择器)
- React Native学习之TabBarIOS用法
- React-Native TabBarIOS的学习
- react native TabBarIOS 使用详解
- TabBarIOS
- React Native学习之TabBarIOS用法 React Native 解决iOS上键盘遮挡TextInput问题
- TabBarIOS和NavigatorIOS组合使用
- TabBarIOS界面之间切换
- React-Native组件之 Navigator和NavigatorIOS
- React Native]React Native组件之Navigator
- React Native之ViewPagerAndroid 组件
- React Native之ViewPagerAndroid 组件
- 说话人识别中的VAD
- 【Angular】——环境配置
- 世界上最「不务正业」的 5 个科学家
- vb.net 教程 3-5 窗体编程 对话框2 OpenFileDialog & FolderBrowserDialog
- 信息的度量——信息熵
- React-Native组件之 TabBarIOS和TabBarIOS.Item
- 友盟 QQ登录
- 操作系统基础(二)
- Zookeeper系统模型
- 二维数组与指针运算
- 设计模式——单例模式
- android获取屏幕分辨率代码
- LeetCode 284 Peeking Iterator
- Ubuntu 16.04安装谷歌浏览器