一:简介

两个TabBarIOS和TabBarIOS.Item组件可以实现页面Tab切换的功能,Tab页面切换的架构在应用开发中还是非常常见的.如:腾讯QQ,淘宝,美团外卖等等

二:TabBarIOS.Item属性

1.View相关属性样式全部继承(例如:宽和高,背景颜色,边距等相关属性样式)

2.badge string,number 在图标的右上方显示小红色气泡,显示信息

3.icon Image.propTypes.source Tab按钮自定义的图标,如果systemicon属性被定义了,那么该属性会被忽略

4.onPress function 当Tab按钮被选中的时候进行回调,你可以设置selected={true}来设置组件被选中

5.selected bool 该属性标志子页面是否可见,如果你看到一个空白的内容页面,那么你很有可能忘记了选中任何的一个页面标签Tab

6.selectedIcon Image.propTypes.source 设置当Tab按钮被选中的时候显示的自定义图标,如果systemIcon属性被设置了,那么该属性会被忽略。如果定义了icon属性,但是当前的selectedIcon属性没有设置,那么该图标会被设置成蓝色

7.style 设置样式风格,继承View的样式各种风格

8.systemIcon enum('bookmarks','contacts','downloads','favorites','featured','history','more','most-recent','most-viewed','recents','search','top-rated') 这些图标为系统预定义的图标,如果你使用这些图标,那么你上面设置的标题,选中的图标都会被这些系统图标所覆盖。

9.title string 在Tab按钮图标下面显示的标题信息,如果你设置了SystemIcon属性,那么该属性会被忽略

三:TabBarIOS属性

1.View相关属性样式全部继承(例如:宽和高,背景颜色,边距等相关属性样式)

2.barTintColor color 设置tab条的背景颜色

3.style 继承View的所有风格样式

4.tintColor 当前被选中图标的颜色

5.translucent bool 设置Tab栏是不是半透明的效果

四:实例代码:

上面我们主要对TabBarIOS以及TabBarIOS.Item组件做了相关讲解介绍,下面我们针对该两个组件看一下具体使用实例,以下代码经官方实例修改而来,具体代码如下:

import React, { Component } from 'react';

import {
AppRegistry,
StyleSheet,
Text,
View,
TabBarIOS,
} from 'react-native'; class iostaoge extends Component { constructor(props){
super(props);
this.state={
selectedTab: '历史',
notifCount: 0,
presses: 0,
};
}
//进行渲染页面内容
_renderContent(color: string, pageText: string, num?: number) {
return (
<View style={[styles.tabContent, {backgroundColor: color}]}>
<Text style={styles.tabText}>{pageText}</Text>
<Text style={styles.tabText}>第 {num} 次重复渲染{pageText}</Text> </View>
);
}
render() {
return (
<View style={{flex:1}}>
<Text style={styles.welcome}>
iOSTaoge React-Native Tabar-iOS
</Text>
<TabBarIOS
style={{flex:1,alignItems:"flex-end"}}
tintColor="white"
barTintColor="darkslateblue">
<TabBarIOS.Item
title="自定义"
icon={require('./images/flux.png')}
selected={this.state.selectedTab === '自定义'}
onPress={() => {
this.setState({
selectedTab: '自定义',
});
}}
>
{this._renderContent('#414A8C', '自定义界面')}
</TabBarIOS.Item>
<TabBarIOS.Item
systemIcon="history"
selected={this.state.selectedTab === '历史'}
badge={this.state.notifCount > 0 ? this.state.notifCount : undefined}
onPress={() => {
this.setState({
selectedTab: '历史',
notifCount: this.state.notifCount + 1,
});
}}
>
{this._renderContent('#783E33', '历史记录', this.state.notifCount)}
</TabBarIOS.Item>
<TabBarIOS.Item
systemIcon="downloads"
selected={this.state.selectedTab === '下载'}
onPress={() => {
this.setState({
selectedTab: '下载',
presses: this.state.presses + 1
});
}}>
{this._renderContent('#21551C', '下载页面', this.state.presses)}
</TabBarIOS.Item> </TabBarIOS>
</View>
);
}
} const styles = StyleSheet.create({
tabContent: {
flex: 1,
alignItems: 'center',
},
welcome: {
fontSize: 20,
textAlign: 'center',
marginTop: 20,
},
tabText: {
color: 'white',
margin: 50,
},
});

效果图:

最近有个妹子弄的一个关于扩大眼界跟内含的订阅号,每天都会更新一些深度内容,在这里如果你感兴趣也可以关注一下(嘿对美女跟知识感兴趣),当然可以关注后输入:github 会有我的微信号,如果有问题你也可以在那找到我;当然不感兴趣无视此信息;

React Native知识7-TabBarIOS组件的更多相关文章

  1. React Native知识5-Touchable类组件

    React Native 没有像web那样可以给元素绑定click事件,前面我们已经知道Text组件有onPress事件,为了给其他组件 也绑定点击事件,React Native提供了3个组件来做这件 ...

  2. React Native知识

    http://www.cnblogs.com/wujy/tag/React%20Native/    React Native知识12-与原生交互 React Native知识11-Props(属性) ...

  3. React Native 项目常用第三方组件汇总

    React Native 项目常用第三方组件汇总 https://www.jianshu.com/p/d9cd9a868764?utm_campaign=maleskine&utm_conte ...

  4. React Native知识6-NavigatorIOS组件

    NavigatorIOS包装了UIKit的导航功能,可以使用左划功能来返回到上一界面.本组件并非由Facebook官方开发组维护.这一组件的开发完全由社区主导.如果纯js的方案能够满足你的需求的话,那 ...

  5. React Native知识2-Text组件

    Text用于显示文本的React组件,并且它也支持嵌套.样式,以及触摸处理.在下面的例子里,嵌套的标题和正文文字会继承来自styles.baseText的fontFamily字体样式,不过标题上还附加 ...

  6. React Native知识12-与原生交互

    一:原生传递参数给React Native 1:原生给React Native传参 原生给JS传数据,主要依靠属性. 通过initialProperties,这个RCTRootView的初始化函数的参 ...

  7. React Native知识1-FlexBox 布局内容

    一:理论知识点 1:什么是FlexBox布局? 弹性盒模型(The Flexible Box Module),又叫Flexbox,意为“弹性布局”,旨在通过弹性的方式来对齐和分布容器中内容的空间,使其 ...

  8. React Native知识10-ListView组件

    ListView - 一个核心组件,用于高效地显示一个可以垂直滚动的变化的数据列表.最基本的使用方式就是创建一个ListView.DataSource数据源,然后给它传递一个普通的数据数组,再使用数据 ...

  9. React Native知识9-ScrollView组件

    一个包装了平台的ScrollView(滚动视图)的组件,同时还集成了触摸锁定的“响应者”系统. 记住ScrollView必须有一个确定的高度才能正常工作,因为它实际上所做的就是将一系列不确定高度的子组 ...

随机推荐

  1. Don't let self-built concept imprison yourself

    If Self-inferiority is disease, but self-confidence is hazard. Leo moon personalities can be extreme ...

  2. iOS开发之多图片无缝滚动组件封装与使用

    经常有园友会问"博主,有没有图片无限滚动的Demo呀?", 正儿八经的图片滚动的Demo我这儿还真没有,今天呢就封装一个可以在项目中直接使用的图片轮播.没看过其他iOS图片无限轮播 ...

  3. C# 将多个office文件转换及合并为一个PDF文件

    PDF文件介绍 PDF(Portable Document Format )文件源于20世纪90年代初期,如今早已成为了一种最流行的的文件格式之一.因为PDF文件有很多优点: 支持跨平台和跨设备共享 ...

  4. Xen之初体验:HA(额外附加)

    高可用性,虽说不是在这个版本就开始免费的,但是连续的体验一下会更加完整些. Figure 9在资源池的位置上右击选择High Availability,进入到配置HA的窗口中 Figure 10在资源 ...

  5. Color Transfer between Images code实现

    上计算机视觉课老师布置的作业实现论文:Color Transfer between Images 基本思路是: 1.给定srcImg和targetImg 2.将RGB空间转为Lab空间 3.根据论文中 ...

  6. PHP+MySQL中实现分页

    你只需要在需要添加页的页面加入这几行代码 <?phpinclude 'form.class.php'; $p=new Page(100, 'Demo01.php');//这里需要传递两个参数,参 ...

  7. 分享我基于NPOI+ExcelReport实现的导入与导出EXCEL类库:ExcelUtility (续篇)

    上周六我发表的文章<分享我基于NPOI+ExcelReport实现的导入与导出EXCEL类库:ExcelUtility>受到了大家的热烈支持与推荐,再此表示感谢,该ExcelUtility ...

  8. Python字典实现分析

    背景介绍 最近使用Python开发项目为主,当使用到字典时感觉非常方便实用.那么好奇心就驱使我要搞清楚字典是怎么实现的.为了真正的搞清楚字典的实现就不得不使用C语言来实现一遍,为此我查了一些资料现在总 ...

  9. Javascript函数的几种写法

    最近在看某个插件的源码时,总是看到各种不同风格的js函数的写法.(怪我只是初级水平,看的一头雾水) 于是想找点资料,总结总结,心里不清不楚的总是很别扭! 1.常规写法 // 函数写法 function ...

  10. SQL Server时间粒度系列----第7节日历数据表详解

    本文目录列表: 1.时间粒度有关描述 2.时间维度有关功能函数3.日历数据表 4.日历数据表数据填充 5.总结语 6.参考清单列表   时间粒度有关描述   将该系列涉及到的时间粒度以及分钟以下的粒度 ...